纯前端生成二维码图片链接vue.js

最近我在改我们项目得一个一年多年前得有关canvas生成海报得活动,二维码本来是通过[草料生成器]生成,也就是链接是死得，而不是动态得，现在要改成动态得链接

我必须自己去生成，但是呢因为这个活动得代码通过在js中直接读取图片,所以我想着最小的改动，也就是生成得二维码我需要拿到对应得图得链接，才是最小得改动.

第一步:下载包

npm install qrcodejs2 --save

第二步:模块

// 获取二维码链接
import QRCode from 'qrcodejs2'; // 引入qrcode
const qrcodeLink = ({
  width = 66,
  height = 66,
  text = '', // 二维码地址
  colorDark = '#000', // 二维码（黑点）的颜色
  colorLight = '#fff', // 背景颜色
}) => {
  if (!text) return '请输入二维码链接';
  const ele = document.createElement('div');
  const qrcode = new QRCode(ele, {
    width,
    height,
    text, // 二维码地址
    colorDark,
    colorLight,
  });
  return qrcode._oDrawing._elCanvas.toDataURL('image/png');
};

export default qrcodeLink;

第三步:使用(QRcodeLink.js)

import QRcodeLink from 'UTILS/QRcodeLink';
this.img = QRcodeLink({
  text: 'https://www.baidu.com', // 二维码地址
  colorDark : 'red',
  colorLight : 'yellow',
});

第四步:展示

理解

其实最重要的就是如何在二维码已经形成?在其他文章里面，应该是等img创建了之后去拿img里面的src,这是我们在浏览器能够看到的现象,(但是别人是下载是通过点击操作，而不是直接形成]，在执行new QRcode的时候img标签的src好没有形成[因为img的onload等事件是异步]，也没有回调函数,我们要做的就是同步形成链接之后就能够拿到图片链接.

查看源码可以知道，在执行new QRcode的同步代码中，拿到了

所以我们也可以通过qrcode._oDrawing._elCanvas.toDataURL('image/png')拿到直接能够拿到图片链接.

还有就是图片并不需要挂载到html里面，所以直接去创建一个const ele = document.createElement('div');就好