背景图固定,二维码动态组合完成图片并下载

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";
posted @ 2022-09-20 11:11  豆浆不要油条  阅读(72)  评论(0编辑  收藏  举报