<template> ???<div id="QRcode"> ??????<div class=‘QR-qrcode‘ style=‘display:none;‘></div> ???</div></template><script> ???import QRCode from ‘qrcode-js-package‘ ???export default { ???????data () { ???????????return { ???????????} ???????}, ???????props: { ???????????size: { ???????????????type: Number, ???????????????default: 180, ???????????}, ???????????value: { ???????????????type: String, ???????????????default: ‘‘, ???????????}, ???????}, ???????watch:{ ???????????"$parent.qrText"(newVal){ ???????????????this.getQRcodeImg((base64)=>{ ???????????????????document.getElementsByClassName("QR-download")[0].href = base64 ; ???????????????}); ???????????}, ???????}, ???????methods: { ???????????concatCanvas(dom,canvas1,padding){ ???????????????/** ????????????????* @param {Number} padding 图片的padding，默认20 ????????????????* @return {String} 返回base64字符串 ????????????????* ????????????????*/ ???????????????var c1h = canvas1.height, ???????????????????c1w = canvas1.width, ???????????????????context=‘‘, ???????????????????canvas = document.createElement("canvas"); ???????????????padding = padding || 20 ; ???????????????canvas.height = c1h + 2.5 * padding ; ???????????????canvas.width = c1w + 2 * padding ; ???????????????/** end **/ ???????????????dom.appendChild(canvas); ???????????????/** 将canvas画上白色背景 **/ ???????????????context = canvas.getContext("2d"); ???????????????context.fillStyle ="white"; ???????????????context.fillRect(0,0,canvas.width,canvas.height); ???????????????/** end **/ ???????????????context.drawImage(canvas1, padding, padding, c1w ,c1h); ???????????????/** end **/ ???????????????/** 返回base64,用于注入到a标签里以便下载 **/ ???????????????return canvas.toDataURL(‘image/jpeg‘,1); ???????????????/** end **/ ???????????}, ???????????getQRcodeImg(fn,s){ ???????????????let url = s||this.value, ???????????????????size = this.size, ???????????????????dom = document.getElementById("QRcode"), ???????????????????$qrcode = dom.getElementsByClassName("QR-qrcode")[0], ???????????????????$main = dom.getElementsByClassName("QR-main")[0]; ???????????????new QRCode($qrcode, { ???????????????????text: url, ???????????????????width: size, ???????????????????height: size, ???????????????????correctLevel : QRCode.CorrectLevel.H ???????????????}); ???????????????let base64 = this.concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],15); ???????????????fn && fn(base64); ???????????} ???????}, ???}</script>结果：
vue url生产二维码
原文地址：https://www.cnblogs.com/web-fusheng/p/10050718.html