SORU
20 ŞUBAT 2010, CUMARTESİ


Resim yeniden boyutlandırma HTML5 tuval

İstemci tarafı javascript ve tuval öğesi kullanarak bir küçük resim oluşturmak için çalışıyorum, ama ben resmi küçültüp, korkunç görünüyor. Eğer yeniden örnekleme için set, photoshop ile küçültülmüş oldu gibi görünüyor 'En Yakın Komşu' çift küplü yerine. Ben bu this site sadece iyi bir tuval kullanarak yapabilirsiniz, çünkü bak, almak mümkün. Onlar aynı şifreyi kullanarak, "[Kaynak]" link, ama yine de korkunç görünüyor. gösterildiği gibi çalıştım Kaçırdığım birşeyler set edilmesi gereken bir ayarı falan var mı?

DÜZENLEME:

Bir jpg yeniden boyutlandırmak için çalışıyorum. Photoshop bağlantılı sitesinde ve aynı jpg boyutlandırma denedim ve küçüldüğünde iyi görünüyor.

Burada ise ilgili kod:

reader.onloadend = function(e)
{
    var img = new Image();
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function()
    {
        var ratio = 1;

        if(img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
            ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
    };

    img.src = reader.result;
}

EDİT2:

Yanılmışım gibi görünüyor, bağlantılı web sitesi, daha iyi görüntü küçülme bir iş yapmıyordu. Diğer önerilen yöntemleri denedim ama hiçbiri bir daha bak. Bu farklı yöntemler neden nedir:

Photoshop:

alt text

Tuval:

alt text

Görüntü işleme ile görüntü: optimizeQuality ve/boy: genişliği ayarlayın ölçekli

alt text

Görüntü işleme ile görüntü:- moz-dönüşümü: optimizeQuality set ve ölçeklenmiş

alt text

Pixastic üzerinde yeniden boyutlandırma tuval:

alt text

Bu firefox gerektiği gibi çift küplü örnekleme için kullanmıyor demektir. Sadece onlar aslında eklemek kadar beklemek zorundayım.

EDİT3:

Original Image

CEVAP
11 Temmuz 2010, Pazar


Eğer tüm tarayıcılar (aslında, Chrome 5 bana çok iyi bir cevap verdi) yeterince iyi yeniden örnekleme kalitesi vermiyor eğer doğru değilse ne yapacağız? Sen o zaman Kendin uygulamak! - Haydi, gidiyoruz giren yeni çağ Web 3.0, HTML5 uyumlu tarayıcılar, süper optimize JİT javascript derleyici, multi-core(†) makineleri, ton ile hafıza, neden korkuyorsun? Hey, kelime performans garantisi, sağ javascript java var mı? Hani, küçük resim oluşturma kodu:

// returns a function that calculates lanczos weight
function lanczosCreate(lobes) {
    return function(x) {
        if (x > lobes)
            return 0;
        x *= Math.PI;
        if (Math.abs(x) < 1e-16)
            return 1;
        var xx = x / lobes;
        return Math.sin(x) * Math.sin(xx) / x / xx;
    };
}

// elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius
function thumbnailer(elem, img, sx, lobes) {
    this.canvas = elem;
    elem.width = img.width;
    elem.height = img.height;
    elem.style.display = "none";
    this.ctx = elem.getContext("2d");
    this.ctx.drawImage(img, 0, 0);
    this.img = img;
    this.src = this.ctx.getImageData(0, 0, img.width, img.height);
    this.dest = {
        width : sx,
        height : Math.round(img.height * sx / img.width),
    };
    this.dest.data = new Array(this.dest.width * this.dest.height * 3);
    this.lanczos = lanczosCreate(lobes);
    this.ratio = img.width / sx;
    this.rcp_ratio = 2 / this.ratio;
    this.range2 = Math.ceil(this.ratio * lobes / 2);
    this.cacheLanc = {};
    this.center = {};
    this.icenter = {};
    setTimeout(this.process1, 0, this, 0);
}

thumbnailer.prototype.process1 = function(self, u) {
    self.center.x = (u   0.5) * self.ratio;
    self.icenter.x = Math.floor(self.center.x);
    for (var v = 0; v < self.dest.height; v  ) {
        self.center.y = (v   0.5) * self.ratio;
        self.icenter.y = Math.floor(self.center.y);
        var a, r, g, b;
        a = r = g = b = 0;
        for (var i = self.icenter.x - self.range2; i <= self.icenter.x   self.range2; i  ) {
            if (i < 0 || i >= self.src.width)
                continue;
            var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
            if (!self.cacheLanc[f_x])
                self.cacheLanc[f_x] = {};
            for (var j = self.icenter.y - self.range2; j <= self.icenter.y   self.range2; j  ) {
                if (j < 0 || j >= self.src.height)
                    continue;
                var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
                if (self.cacheLanc[f_x][f_y] == undefined)
                    self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2)
                              Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
                weight = self.cacheLanc[f_x][f_y];
                if (weight > 0) {
                    var idx = (j * self.src.width   i) * 4;
                    a  = weight;
                    r  = weight * self.src.data[idx];
                    g  = weight * self.src.data[idx   1];
                    b  = weight * self.src.data[idx   2];
                }
            }
        }
        var idx = (v * self.dest.width   u) * 3;
        self.dest.data[idx] = r / a;
        self.dest.data[idx   1] = g / a;
        self.dest.data[idx   2] = b / a;
    }

    if (  u < self.dest.width)
        setTimeout(self.process1, 0, self, u);
    else
        setTimeout(self.process2, 0, self);
};
thumbnailer.prototype.process2 = function(self) {
    self.canvas.width = self.dest.width;
    self.canvas.height = self.dest.height;
    self.ctx.drawImage(self.img, 0, 0, self.dest.width, self.dest.height);
    self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
    var idx, idx2;
    for (var i = 0; i < self.dest.width; i  ) {
        for (var j = 0; j < self.dest.height; j  ) {
            idx = (j * self.dest.width   i) * 3;
            idx2 = (j * self.dest.width   i) * 4;
            self.src.data[idx2] = self.dest.data[idx];
            self.src.data[idx2   1] = self.dest.data[idx   1];
            self.src.data[idx2   2] = self.dest.data[idx   2];
        }
    }
    self.ctx.putImageData(self.src, 0, 0);
    self.canvas.style.display = "block";
};

bu! sonuçlar üretebilir ...

img717.imageshack.us/img717/8910/lanczos358.png

her neyse, burada bir 'sabit' örnek: sürüm

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); //this produces lanczos3
    // but feel free to raise it up to 8. Your client will appreciate
    // that the program makes full use of his machine.
    document.body.appendChild(canvas);
};

Şimdi en iyi tarayıcılar orada bir çukur ve bir en az müvekkilinin kan basıncı artıracak görme vakti geldi!

Umm, nerede alay etiketim mi?

kodu birçok yerinde tabanlı olduğundan (Anrieff Gallery Generator de GPL2 kapsamında? Ben) bilmiyorum

aslında javascript sınırlaması nedeniyle, çok çekirdekli desteklenmiyor.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • efaustus9

    efaustus9

    16 HAZİRAN 2006
  • HowToBasic

    HowToBasic

    8 Aralık 2011
  • уσ ρℓz sυв ιℓℓ sυв вαcқ

    уσ ρℓz

    14 EKİM 2010