我尝试使用 Canvas 缩小图像，以便稍后使用数据进行哈希比较。然而我注意到 Canvas (或者至少是我使用的简单代码)不使用 mipmap 过滤器，导致非常清晰的结果，并使针对另一个现有散列的测试失败(按预期使用线性作品缩小 gimp 中的图像)。我用来缩小规模的代码是

var canvas = document.createElement("canvas"); 
canvas.width = width; canvas.height = height; 
 
var context = canvas.getContext('2d'); 
context.drawImage(image, 0, 0, width, height); 
 
return context.getImageData(0, 0, width, height).data; 

这会导致该图像(左)达到预期(右)

如何使 Canvas 缩小线性？

请您参考如下方法:

new canvas draft指定为 Canvas 设置重新采样/插值的方法。当前方法始终是双线性的，或者是最近邻的，如果 imageSmoothingEnabled = false (两种方法都适用于放大和缩小采样)。新属性名为 imageSmoothingQuality :

context . imageSmoothingQuality [ = value ]

value can be “low ”、“medium ”和“high ”(例如双三次/Lanczos 之类的东西)。然而，在撰写本文时，还没有浏览器实现这一点，并且没有强制规定每个值使用的实际算法。

替代方法是当您需要使用多个步骤进行超过 50% 的更改时手动重新采样，或者实现重新采样算法。

<强> Here is an example 多个步骤来实现双三次质量水平(并避免最初的 CORS 问题)，以及 one showing the Lanczos algorithm (需要满足 CORS 要求)。

除此之外，您还可以申请sharpening convolution以补偿一些损失的清晰度。