js让页面生成图片长按保存

1.定义获取图片

// 获取mase64
function getBase64Image(img) {
  // console.log(img);
  // console.log(img.width);
  // console.log(img.height);
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  let dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
  return dataURL;
}

2.生成图片

  $(".btn_poster").on("click", function () {
    $(".imgPage").velocity("transition.expandIn", { duration: 700, delay: 0 });
    var srcHead = headerImg;
    let image = new Image();
    image.crossOrigin = "*"; // 支持跨域图片
    image.src = srcHead;
    image.width = "150";
    image.height = "150";
    var srcHeadNew;
    setTimeout(() => {
      srcHeadNew = getBase64Image(image);
      $("#head_img").attr("src", srcHeadNew);
      new html2canvas(document.getElementById("poster"), {
        backgroundColor: "transparent",
        allowTaint: false,
        useCORS: false,
        scale: 4, // 处理模糊问题
        dpi: 300, // 处理模糊问题
      }).then((canvas) => {
        // canvas为转换后的Canvas对象
        let oImg = document.getElementById("poster_img");
        oImg.crossOrigin = "Anonymous";
        oImg.src = canvas.toDataURL("image/png"); // 导出图片
        $("#poster_img_wrap").fadeIn();
        // alertItem("提示", "海报已生成<br>长按图片保存到本地");
      });
    }, 1000);
  });