使用谷歌的图表图像 API (可惜从 2012 年 4 月开始已经停用),可以生成 QR 码。
我相信我可以使用该 API 来更改生成图像的大小,但我更愿意只使用 CSS 和宽度和高度属性来使其稍微大一些。
至少在 Chrome 中,这会导致丑陋的反锯齿效果(不太理想,因为需要让机器解析)。有没有办法告诉浏览器不要反锯齿放大后的图像呢?
![QR code](https://istack.dev59.com/1f3ym.webp)
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+ */
}
https://developer.mozilla.org/en/css/image-rendering
例如,在Firefox中调整宽度和高度时,还需添加。img{
width:100px;
height:100px;
image-rendering: optimizeQuality;
}
然而,目前看来Chrome还不支持此功能。
image-rendering: -webkit-optimize-contrast;
。这在Chrome(v23.0.1271.95)中对我有效。