Как сделать QR-код более четким при отображении большого размера?

Question

Вот QR-код, который кодирует «sup»:

А вот простой HTML-фрагмент для рендеринга большего размера:

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

К сожалению, в браузерах это выглядит как более размытое изображение:

Я знаю, что могу воссоздать изображение на большомразрешающая способность. Но я из школы мысли, что изображения не должны быть увеличены для представления.

Могу ли я сделать что-нибудь, чтобы сделать это, не будучи размытым?

Answer 1

Попробуйте добавить к этому элементу стиль CSS image-rendering: pixelated;. Это сохранит пиксели при масштабировании.

Имейте в виду, что для этого тега существует разная межбраузерная поддержка, например, для работы Chrome и Firefox требуются разные теги. Подробнее здесь

Answer 2

Вы можете применить правило CSS для изменения алгоритма масштабирования.

img.qr {
  image-rendering: pixelated;
}

Это имеет достойную поддержку браузера. https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Вместо этого я предпочитаю использовать SVG для QR-кодов. Затем они могут быть сохранены для других целей в другом месте.