生成二维码插件的使用

个人项目案例：

页面html

<canvas class="qr-code"></canvas>

页面js

import QRCode from 'qrcode';
genAuthUrl () {
        const self = this;
        // const content = `https://openapi.shuangkuai.co/saler/auth/index.html?from=mp&userId=${self.userId || ''}&action=bindSaler&t=${Date.now()}`;
        const content = `https://minxxx-xxx.co/saler/auth/index.html?from=mp&userId=${self.userId || ''}&action=bindSaler&t=${Date.now()}`;
        const canvas = self.$el.querySelector('.qr-code');
        QRCode.toCanvas(canvas, content, {
          errorCorrectionLevel: 'Q',
          width: self.qrCodeSize,
          height: self.qrCodeSize
        }, function (error) {
          if (error) console.error(error);
          self.qrCode = canvas.toDataURL('image/jpeg');
        });
      }

下面为他人案例：

最近项目上有一个需求，需要根据一串字符生成二维码展示在页面上，这里就需要用到插件qrcode；它有两个api可以实现生成二维码然后渲染到界面上。

本地安装qrcode
npm install --save qrcode
在页面中引入
import QRCode from ‘qrcode’;
方式一：toCanvas（）
// 第一种形式
toCanvas(canvasElement, text, [options], [cb(error)])
// 第二种形式
toCanvas(text, [options], [cb(error, canvas)])
canvasElement：dom元素，表示画布在哪里绘制QR码
text：String，表示要编码的文本
options：选项

1.QR码选项
version: qrcode版本；如果未指定，将计算出合适的值（Number）
errorCorrectionLevel：纠错级别；可能的值为low, medium, quartile, high或L, M, Q, H（String）
maskPattern：用于遮罩符号的遮罩图案（Number 取值范围0-7）
toSJISFunc：内部使用的辅助函数，用于将汉字转换为其Shift JIS值，如果需要支持汉字模式，请提供此功能
2.Renderers options
margin：默认值4（Number）
scale：默认值4（Number）
width：为输出图像强制指定宽度（Number）
color.dark：暗模块的颜色，值必须为十六进制格式（String）
color.light：照明模块的颜色，值必须为十六进制格式（String）
cb(error）：完成时调用的回调函数

DOM结构

JS代码
// 对应上面的第一种形式
QRCode.toCanvas(document.getElementById(“test”), ‘test’);

// 对应上面的第二种形式
// 注意：DOM结构不能使用标签
QRCode.toCanvas(‘test’, { errorCorrectionLevel: ‘H’ }, (err, canvas) => {
if (err) throw err;
const container = document.getElementById(‘test’);
container.appendChild(canvas)
})
效果图
toCanvas

toCanvas
方式二：toDataURL（）
// 第一种形式
toDataURL(text, [options], [cb(error, url)])
// 第二种形式
toDataURL(canvasElement, text, [options], [cb(error, url)])
canvasElement：dom元素，表示画布在哪里绘制QR码
text：String，表示要编码的文本
options：选项
cb(error, url)：完成时调用的回调函数

type：数据URI格式，默认值：image/png（String）
quality：图像质量，默认值：0.92
其他选项见toCanvas（）下的选项内容
DOM结构

JS代码
const opts = {
errorCorrectionLevel: ‘H’,
type: ‘image/jpeg’,
quality: 0.3,
margin: 1,
color: {
dark: “#010599FF”,
light: “#FFBF60FF”,
},
};
// 对应第一种形式
QRCode.toDataURL(‘toDataURL’, opts, (err, url) => {
if (err) throw err;
const img = document.getElementById(‘test’);
img.src = url;
});

// 对应第二种形式 对应的DOM结构为
QRCode.toDataURL(document.getElementById(‘test’), ‘toDataURL’, opts);
效果图
toDataURL

作者：小胖周
链接：https://www.jianshu.com/p/83296fecdd45
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。