我尝试使用 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以补偿一些损失的清晰度。
关于javascript - Canvas 线性缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36185588/