调整HTML画布以用于缩略图：我能减少像素化并改善调整大小后的外观/插值吗？

Question

我从一个大画布开始，使用drawImage()将实际图像的数据绘制到HTML画布中。

然后，为了提高性能，我创建了许多缩略图，它们是小得多的画布元素。我只需创建新的画布，设置较小的宽度和高度，然后再次使用drawImage()使用原始画布来创建缩略图。

在许多平台上，结果缩略图看起来非常像素化（PC Chrome、PC Firefox、iOS Safari），但在其他平台上，如Mac Firefox，调整大小的插值效果更好。

是否有任何解决方案可以给我一致的插值效果？例如，IE有一个专有的CSS属性可以设置：

object.style.msInterpolationMode = “bicubic”; 

其他平台上有类似的解决方案吗？特别是在drawImage()期间进行隐式图像调整时？或者任何其他创造性的解决方案都可以。

- Chris Bosco

Answer 1

很遗憾，短暂的答案是没有内置的方法。迄今为止，不同的浏览器已经以不同的方式实现了抗锯齿和可能的插值。

不幸的是，在这里规范非常宽松：

如果原始图像数据是位图图像，则在目标矩形中某一点绘制的值是通过过滤原始图像数据计算得出的。用户代理（浏览器）可以使用任何过滤算法（例如双线性插值或最近邻）。

重点在于“用户代理可以使用任何过滤算法”。换句话说，浏览器可以自由地实现drawImage。对于希望获得一致性的人来说，这是不幸的。

可以使用getImageData或大量调用drawImage()来制作自己的算法，但这会很慢。

- Simon Sarris