我正在尝试用画布调整一些图像的大小，但我不知道如何平滑它们。
在 Photoshop、浏览器等上。他们使用一些算法（例如双三次、双线性），但我不知道这些算法是否内置在画布中。
这是我的小提琴：http://jsfiddle.net/EWupT/ http://jsfiddle.net/EWupT/
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);
第一个是正常调整大小的图像标签，第二个是画布。请注意画布并不那么光滑。如何才能达到“流畅”？
您可以使用降步来获得更好的结果。大多数浏览器似乎使用线性插值而不是双三次插值 http://entropymine.com/resamplescope/notes/browsers/调整图像大小时。
(Update规格中增加了质量属性，imageSmoothingQuality https://devdocs.io/dom/canvasrenderingcontext2d/imagesmoothingquality目前仅在 Chrome 中可用。）
除非选择不平滑或最近邻，否则浏览器将始终在缩小图像后对图像进行插值，因为此功能充当低通滤波器以避免混叠。
双线性使用 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。
在演示中，您可以看到新结果现在与图像元素非常相似。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
