如何快速清除二维码,扫完二维码怎么把它清除掉

QRCode.js 文档： http://code.ciaoca.com/javascript/qrcode/
npm package 地址： https://www.npmjs.com/package/qrcodejs2
GitHub 地址： https://github.com/davidshimjs/qrcodejs

如果想要页面和下载的二维码都带白边边框

可以结合插件html2canvas来实现（如有其它方案，欢迎分享）

html2canvas 是一款利用javascript进行屏幕截图的插件

//安装 cnpm install --save html2canvas //引入 import html2canvas from "html2canvas";

主要思路：

• 先使用QRCode生成二维码图片
• 然后使用html2canvas把带样式的二维码生成新的图片
• 隐藏QRCode生成的二维码图片

<div ref="canvas" class="canvas-box" :style="{display:(originImg===true?'none':'flex')}"> <div class="qrcode-box"> <div ref="qrcode" class="qrcode-img"></div> </div> <div class="qrcode-text"> 扫一扫 </div> </div> <img :src="imgUrl">

最终效果

html2canvas 文档地址： http://html2canvas.hertzen.com/documentation

github 地址： https://github.com/niklasvh/html2canvas

//安装 cnpm install jsbarcode --save //引入 import JsBarcode from 'jsbarcode' 页面容器

<template> <!-- 条形码容器，可选svg、canvas，或img标签 --> <svg id="barcode"></svg> <!-- or --> <canvas id="barcode"></canvas> <!-- or --> <img id="barcode"/> </template 实例化

不要在DOM还未加载时，调用jsbarcode库，比如create生命周期

简版

JsBarcode('#barcode', 12345678, { displayValue: true // 是否在条形码下方显示文字 } )

复杂版

// 生成条形码 JsBarcode('#barcode', '12345678', { format: "CODE39",//选择要使用的条形码类型 width:3,//设置条之间的宽度 height:100,//高度 displayValue:true,//是否在条形码下方显示文字 text:"Axjy",//覆盖显示的文本 fontOptions:"bold italic",//使文字加粗体或变斜体 font:"fantasy",//设置文本的字体 textAlign:"right",//设置文本的水平对齐方式 textPosition:"top",//设置文本的垂直位置 textMargin:5,//设置条形码和文本之间的间距 fontSize:15,//设置文本的大小 background:"#eee",//设置条形码的背景 lineColor:"#FF7F50",//设置条和文本的颜色。 margin:15//设置条形码周围的空白边距 })

GitHub 地址

文档地址

条码生成器