画布线性缩小答案

【问题标题】：Canvas linear downscaling画布线性缩小
【发布时间】：2016-04-02 02:47:31
【问题描述】：

我试图使用画布对图像进行缩小，以便稍后使用数据进行哈希比较。但是我注意到画布（或至少我使用的简单代码）没有使用 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 如何缩放图像。目前，您最好的选择是手动完成，即编写（或查找）您自己的缩减算法。
该死的太糟糕了。我很高兴我找到了一个小而非常快的解决方案，并希望有一个像 opengl 或 directx 这样的选项。感谢您的信息。我现在就开始做某事，而不是为我现在的工作方式寻找解决方案
您可以通过标志ctx.imageSmoothingEnabled = true; 或firefox ctx.mozImageSmoothingEnabled = true;将上下文渲染器设置为使用平滑，当此标志为真时，我使用的大多数硬件配置似乎都使用双线性插值。
我认为那只是为了升级，但我还是测试了它，遗憾的是没有任何变化
我猜你可以创建自己的伪mipmap - 基本上是一个包含缩小版本的图像的spritesheet图像。

标签： javascript html image canvas

【解决方案1】：

new canvas draft 指定了一种为画布设置重新采样/插值的方法。如果imageSmoothingEnabled = false，当前方法总是双线性或最近邻（两种方法都用于放大和缩小采样）。新属性名为imageSmoothingQuality：

上下文。 imageSmoothingQuality [ = value ]

value can be、“low”、“medium”和“high”（例如双立方/Lanczos）。但是，在撰写本文时，还没有浏览器实现这一点，并且没有强制要求每个值使用的实际算法。

另一种方法是在您需要使用多个步骤进行超过 50% 的更改时手动重新采样，或者实施重新采样算法。

Here is an example 的多个步骤以达到双三次质量水平（并避免初始 CORS 问题），以及 one showing the Lanczos algorithm（需要 CORS 要求见）。

除此之外，您还可以应用sharpening convolution 来补偿一些损失的锐度。

【讨论】：

这是愚人节的玩笑还是卷土重来？无论如何很高兴阅读好的内容。