İ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:

Tuval:

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

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

Pixastic üzerinde yeniden boyutlandırma tuval:

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

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 ...

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.