Microsoft Edge 上的像素化图像渲染？ [复制]答案

【问题标题】：Pixelated image rendering on Microsoft Edge? [duplicate]Microsoft Edge 上的像素化图像渲染？ [复制]
【发布时间】：2018-03-24 23:06:17
【问题描述】：

Microsoft Edge 不支持“图像渲染”CSS 属性，所以我不能使用“图像渲染：像素化”，这对我正在制作的网站来说是一个真正的痛苦。

那么有什么方法可以使用 JavaScript 在 Edge 中将图像渲染为像素化的吗？

【问题讨论】：

这个确切的问题以前没有人问过，这就是我问它的原因。我是专门询问 Edge 的。现在想知道如何在 Edge 上进行像素化图像渲染的人们会有一个答案，所以它在这种方式下很有用。所以我认为它不值得投反对票。
还值得注意的是，您（以及遇到此问题的任何其他人）可以在此处投票支持 Microsoft Edge 中的此功能：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

【解决方案1】：

您可以将图像以更高分辨率渲染为canvas，然后将img.src 替换为数据URL。您可能需要使用最近邻算法“逐像素”渲染它。关闭imageSmoothingEnabled 可以避免这种情况。

请注意，对于外部图像，您将无法将画布导出为数据 URL。不过，您可以只使用画布本身。

【讨论】：