如何让 QR 码在显示大时呈现清晰？

Question

这是一个二维码 "sup":

这里是一个简单的 HTML 片段，用于渲染更大的图像：

<img style="width:400px" src="data:image/gif;base64,R0lGODdhFQAVAPAAAAAAAP///ywAAAAAFQAVAEACT4QPoRfozJpMdJrZKrY6YSgpWeVpI/ItC3l5I3eiZCxnofU+1IzvLCtSBX0bUatl+xyDmxLTxbxFnxdOVRZRoU7TnHBrDBt9xE7EBW2eRQUAOw==">

不幸的是，这在浏览器中呈现为更大的模糊图像：

我知道我可以在高分辨率下重新创建图像。但我的观点是图像不应该为了展示目的而放大。

我可以做任何事情来渲染它而不模糊吗？

Answer 1

您可以应用 CSS 规则来更改缩放算法。

img.qr {
  image-rendering: pixelated;
}

这有不错的浏览器支持。 https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

我更喜欢使用 SVG 来代替二维码。然后，它们可以保存在其他地方用于其他目的。

Answer 2

尝试向该元素添加 image-rendering: pixelated; CSS 样式。这将在缩放时保留像素。

请记住，此标签有不同的跨浏览器支持，例如Chrome 和 Firefox 需要不同的标签才能使其正常工作。更多信息 here

如何让 QR 码在显示大时呈现清晰？

How to make QR code render crisp when shown large?

html

qr-code