如何让二维码在大屏时呈现得清爽？

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