我正在尝试使用javascript和canvas元素在客户端创建缩略图,但是当我缩小图像时,它看起来很糟糕。看起来好像是在Photoshop中缩小了尺寸,将重采样设置为“最近的邻居”而不是Bicubic。我知道有可能使它看起来正确,因为该站点也可以使用画布来完成它。我已经尝试使用与[[Source]]链接中所示相同的代码,但是看起来仍然很糟糕。是否缺少我需要的设置,需要设置的设置?
编辑:
我正在尝试调整jpg的大小。我尝试在链接的网站和photoshop中调整相同jpg的大小,缩小尺寸时看起来还不错。
以下是相关代码:
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; }
因此,如果所有浏览器(实际上,Chrome 5给我提供了一个不错的浏览器)都无法为你提供足够好的重采样质量,你该怎么办?然后,你自己实现它们!哦,来吧,我们正在进入Web 3.0的新时代,符合HTML5的浏览器,超级优化的JIT javascript编译器,具有大量内存的多核(†)机器,你担心什么javascript中有java一词,因此应该保证性能,对吗?看一下,缩略图生成代码:
// 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"; };
…你可以用它产生这样的结果!
因此,无论如何,这是示例的“固定”版本:
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); };
现在是时候让最好的浏览器进站了,看看哪种浏览器最有可能增加客户