使用 qrcodejs2 生成自适应宽高的二维码

_格鲁特宝宝

已于 2022-06-08 09:58:38 修改

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

于 2022-06-08 09:58:14 首次发布

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/125177641

Web FrontEnd 同时被 3 个专栏收录

226 篇文章

订阅专栏

javascript

73 篇文章

订阅专栏

Vue

55 篇文章

订阅专栏

本文介绍了如何在网页中利用qrcodejs2插件创建自适应大小的二维码。通过`npm install qrcodejs2 --save`安装插件，然后在HTML中添加二维码容器，并在JavaScript中调用`new QRCode('qrcode', {width, height, text}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 qrcodejs2 插件

npm install qrcodejs2 --save

使用

html

<div id="qrcode" ref="qrcode"></div>

JS

createQRcode(id, text) {
  let long = document.documentElement.clientWidth * (136 / 375)
  new QRCode('qrcode', {
    width: long,
    height: long,
    text: text,
  });
},

公式

比如：你默认设置二维码图片宽高为 136×136，页面宽高为 375×812
width = document.documentElement.clientWidth * (136 / 375);
height = width;