Generate QR code through jr-qrcode and download it to the client locally (Vue)

Generate QR code

First generate the address of the QR code image

Introduce jr-qrcode

import jrQrcode from 'jr-qrcode';

Generate the address of the QR code image

// 生成二维码地址
getQRCodeUrl(spreadUrl) {
  const QRCodeUrl = jrQrcode.getQrBase64(spreadUrl);
  return QRCodeUrl;
}

that.backUrl = jrQrcode.getQrBase64(data.backUrl)

 

Display QR code picture

<img :src="getQRCodeUrl('二维码内容')" alt="" />

<div>
  <el-image fit="cover" :src="backUrl" style="width:175px; height: 175px" />
</div>

Download the generated QR code image to your local computer

// 下载二维码
uploadQRCode(spreadUrl) {
  const image = new Image();
  // 解决跨域 canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    const canvas = document.createElement("canvas");
  	canvas.width = image.width;
  	canvas.height = image.height;
  	const context = canvas.getContext("2d");
  	context.drawImage(image, 0, 0, image.width, image.height);
  	//得到图片的base64编码数据
  	const url = canvas.toDataURL("image/png");
  	// 生成一个 a 标签
  	const a = document.createElement("a");
  	// 创建一个点击事件
  	const event = new MouseEvent("click");
  	// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
  	a.download = name || "二维码";
  	// 将生成的 URL 设置为 a.href 属性
  	a.href = url;
  	// 触发 a 的点击事件
  	a.dispatchEvent(event);
  	// return a;
  };
  image.src = this.getQRCodeUrl('二维码内容');
}