vue3 html2canvas 网络图片 空白 及使用

本文介绍了如何使用html2canvas库在JavaScript中获取指定div的内容并转换为base64格式图片,支持跨域和不同浏览器的兼容性处理,包括PDF下载和直接下载功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/* <div id="capture" ref="divDom">
      <img :src="img">
    </div> */
import html2canvas from 'html2canvas'
const img = ref("https://tse1-mm.cn.bing.net/th/id/OIP-C.cykW2JFIAZEv6vWFflfjygHaEZ?pid=ImgDet&rs=1")
const base64img = ref()
const weeklyReport = () => {
  console.log('生成周报')
  html2canvas(document.querySelector('#capture'), {
    backgroundColor: "#ffffff",
    allowTaint: true,  //开启跨域
    useCORS: true,
    scrollY: 0,
    scrollX: 0,
  }).then((canvas) => {
    // 转换成base64格式,这个格式可以挂载到img里,也可以下载下来,也可以打压缩包下载下来
    const base64 = canvas
      .toDataURL()
      .replace(/^data:image\/(png|jpg);base64,/, '')
    base64img.value = `data:image/png;base64,${base64}`
    console.log(base64img.value)

    // if (window.navigator.msSaveOrOpenBlob) {

    //   let bstr = atob(base64img.value.split(",")[1]);
    //   let n = bstr.length;
    //   let u8arr = new Uint8Array(n);
    //   while (n--) {
    //     u8arr[n] = bstr.charCodeAt(n);
    //   }
    //   let blob = new Blob([u8arr]);
    //   window.navigator.msSaveOrOpenBlob(blob, "周报" + "." + "pdf");
    // } else {
    //   // 这里就按照chrome等新版浏览器来处理
    //   let a = document.createElement("a");
    //   a.href = base64img.value;
    //   a.setAttribute("download", "周报");
    //   a.click();
    // }
  });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呱嗨喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值