html:

    <canvas id="canvas" width="300" height="450" ></canvas>

js：

function downLoadShareImg(){

      let canvas = document.getElementById("canvas");
      canvas.width = 300;
      canvas.height = 450;
      let context = canvas.getContext("2d");

      // 設(shè)置簡介
      let info = row.zhuyaoxingzhuang;
      var n = 15; // 每行顯示幾個字
      for (var i = 0, l = info.length; i < l / n; i++) {
        var sliceStr = info.slice(n * i, n * (i + 1));
        context.font = "12px  Arial";
        context.fillStyle = "#8C9198";
        var rowHeight = 355 + i * 18;
        context.fillText(sliceStr, 15, rowHeight);
        if (i >= 4) {
          break;
        }
      }

      // 設(shè)置小程序碼热芹，網(wǎng)絡(luò)圖片可不在onload 后設(shè)置脆炎；生成碼時圖片已加載完畢
      let qrcodepath =  row.reserveimg;
      let qrcodeImg = new Image();
      qrcodeImg.src = qrcodepath;
      context.drawImage(qrcodeImg, 212, 285, 75, 75);

// 繪制本地圖片财骨，要在onload 加載圖片后繪制
      let companyPath = "../../../src/assets/logo.jpg";
      let companyImg = new Image();
      companyImg.crossOrigin = "anonymous";
      companyImg.onload = function () {
        context.drawImage(companyImg, 15, 270, 50, 50);
      };
      companyImg.src = companyPath;

//把畫板內(nèi)容繪制成圖片并下載
      setTimeout((res) => {
        let dataURL = canvas.toDataURL("image/png");

        var save_link = document.createElement("a");
        save_link.href = dataURL;
        save_link.download ="分享圖.png";

        var clickevent = document.createEvent("MouseEvents");
        clickevent.initEvent("click", true, false);
        save_link.dispatchEvent(clickevent);
      }, 500);
}

Ｂ堂Ａ穸肌！
1 web中用webpack編輯使用本地圖片要用絕對路徑；例如：'/dist/logo.png'