当进行放大操作时，如何防止浏览器抗锯齿？

Question

使用谷歌的图表图像 API (可惜从 2012 年 4 月开始已经停用)，可以生成 QR 码。 我相信我可以使用该 API 来更改生成图像的大小，但我更愿意只使用 CSS 和宽度和高度属性来使其稍微大一些。 至少在 Chrome 中，这会导致丑陋的反锯齿效果（不太理想，因为需要让机器解析）。有没有办法告诉浏览器不要反锯齿放大后的图像呢？

- Protector one

Answer 1

这个人有解决方案：http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

img { 
    image-rendering: optimizeSpeed;             /* PREFER SPEED OVER SMOOTHING  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  }

所以，对你来说：

imgQR { 
    width:100px;
    height:100px;
    image-rendering: optimizeSpeed;             /* PREFER SPEED OVER SMOOTHING  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  }

- Brian

---

我该如何将这个应用到在<canvas>上绘制的图像上？ - Sean Letendre

没关系，我已经找到答案了：https://dev59.com/TnVC5IYBdhLWcg3wvT_g#195575 - Sean Letendre

Answer 2

你可能在寻找的是这里：

https://developer.mozilla.org/en/css/image-rendering

例如，在Firefox中调整宽度和高度时，还需添加。

img{
width:100px;
height:100px;
 image-rendering: optimizeQuality;
}

然而，目前看来Chrome还不支持此功能。

- Amaerth

---

我认为你实际上是指清晰的渲染属性。不幸的是，这些属性并没有得到广泛支持。 - Nathanael

是的，你说得对。质量可能会有所提高，但我认为这个解决方案不会解决抗锯齿问题。 - Amaerth

Answer 3

尝试使用image-rendering: -webkit-optimize-contrast;。这在Chrome（v23.0.1271.95）中对我有效。

- ErJab

---

它对我似乎没有任何作用。 - Protector one