背景图固定,二维码动态组合完成图片并下载
methods:{ downloadItem(ary, sleep = 1000){ let row = ary.shift(); if(!row){ return } let textImg = drawText({ text: `${row.loginName}_${row.shareCount}`, color: "#fff", fontSize: 30, width: "750", }); this.makeQrCode(row.shareCode).then((url) => { mergeImages( [ "https://mdhw.oss-cn-hangzhou.aliyuncs.com/h5/share_bg.png?v=2.0", { src: url, x: 149, y: 478 }, { src: textImg, x: 0, y: 995 }, ], { crossOrigin: "Anonymous", } ).then((b64) => { fileDownload( dataURLtoFile(b64), `${row.loginName}_${row.shareCount}.png` ); setTimeout(()=>{ this.downloadItem(ary, sleep) }, sleep) }); }); }, makeQrCode(shareCode) { return QRCode.toDataURL( `https://www.nairongmiao.xyz/share.html?shareCode=${shareCode}`, { errorCorrectionLevel: "H", width: 477, margin: 1, } ); }, }
需要的依赖有如下三个
import fileDownload from "js-file-download";
import mergeImages from "merge-images";
import QRCode from "qrcode";