html2canvas下载图片

19 阅读1分钟
const getPrintScreen = () => {
  html2canvas(contentParticulars.value, {
    // width: 30, //截图宽度
    // height: 50, //截图高度
    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色(null)
    useCORS: true, //支持图片跨域
    scale: 1, //设置放大的倍数
  }).then((canvas) => {
    // 把生成的base64位图片上传到服务器,生成在线图片地址
    let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
    // 下载图片
    let aLink = document.createElement("a");
    let blob = base64ToBlob(url); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
    aLink.download = `${particular.value.name}人才筛选信息`;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(
      new MouseEvent("click", { bubbles: true, cancelable: true, view: window })
    ); //兼容火狐
  });
};
const base64ToBlob = (code) => {
  let arr = code.split(",");
  // 图片格式
  let mime = arr[0].match(/:(.*?);/)[1];
  // 获取,之后的base64的编码
  let bstr = window.atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
};