原因
一些图像只是很难下采样和内插,如这个有曲线,当你想从一个大的大小。
浏览器通常使用canvas元素的双线性(2×2采样)内插,而不是bi-cubic(4×4采样)的(可能)性能原因。
如果步长太大,那么简单地没有足够的像素来从其中反映在结果中。
从信号/ DSP的角度来看,你可以看到这是一个低通滤波器的阈值设置得太高,如果信号中有很多高频(细节),可能会导致混叠。
解
解决方案是使用降压以获得正确的结果。降低意味着您逐步减小大小,以允许有限的插值范围覆盖足够的像素进行采样。
这将允许良好的结果,也与双线性插值(它的行为非常像双立方体,当这样做)和开销是最小的,因为在每个步骤中有更少的像素采样。
理想的步骤是在每个步骤中达到一半的分辨率,直到设置目标大小(感谢Joe Mabel提及这个!)。
使用原始问题中的直接缩放:
使用降压如下图所示:
在这种情况下,您需要分三步:
在步骤1中,我们通过使用离屏画布将图像缩小为一半:
/// step 1 - create off-screen canvas
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);
步骤2重新使用离屏画布,并将图像再次缩小到一半:
/// step 2
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
我们再次画到主画布,再次减少到一半,但到最终尺寸:
/// step 3
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
0, 0, canvas.width, canvas.height);
小费:
您可以使用此公式计算所需的步骤总数(包括设置目标尺寸的最后一步):
steps = Math.ceil(Math.log(sourceWidth / targetWidth) / Math.log(2))