我正在尝试使用画布调整某些图像的大小,但是我对如何使其平滑一无所知。在Photoshop,浏览器等上。它们使用一些算法(例如双三次,双线性),但我不知道这些算法是否内置在画布中。
var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas);
第一个是正常尺寸调整后的图片标签,第二个是画布。请注意,画布如何不那么光滑。如何获得“顺滑度”?
您可以使用降级以获得更好的结果。调整图像大小时,大多数浏览器似乎使用线性插值而不是双三次插值。
( 更新 在规范中添加了品质属性,该属性imageSmoothingQuality当前仅在Chrome中可用。)
imageSmoothingQuality
除非没有选择平滑或最接近的邻居,否则浏览器将始终在缩小图像后对图像进行插值,因为此功能用作低通滤波器以避免混叠。
双线性使用2x2像素进行插值,而双三次使用4x4进行插值,因此,通过逐步执行此操作,可以在使用双线性插值时接近双三次结果,如在所得图像中看到的那样。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function () { // set size proportional to image canvas.height = canvas.width * (img.height / img.width); // step 1 - resize to 50% var oc = document.createElement('canvas'), octx = oc.getContext('2d'); oc.width = img.width * 0.5; oc.height = img.height * 0.5; octx.drawImage(img, 0, 0, oc.width, oc.height); // step 2 octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5); // step 3, resize to final size ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height); } img.src = "//i.imgur.com/SHo6Fub.jpg"; <img src="//i.imgur.com/SHo6Fub.jpg" width="300" height="234"> <canvas id="canvas" width=300></canvas>
如果差异不大,则取决于您调整大小的激烈程度,您可以跳过第2步。
在演示中,您可以看到新结果现在与image元素非常相似。