使用html2canvas实现快照，并添加元素到dom中，截图之后再删除

最新推荐文章于 2024-04-29 10:40:41 发布

zlzbt

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量151

点赞数 2

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/zlzbt/article/details/136687296

版权

const pixiImg = mapApp.takeScreenShot();// base64文件
const img = document.createElement("img");
img.src=pixiImg;
img.style.position = 'absolute';
img.style.top = '50px';
img.style.left = '50px';
document.body.appendChild(img)
const canvas = await html2canvas(document.body, {
  useCORS: true, // 【重要】开启跨域配置
  allowTaint: true, // 允许跨域图片
  scale: 2, // 处理模糊问题
})
const result = canvas.toDataURL("png"); // 获取到图片地址(base64格式)
document.body.removeChild(img);

if (result) {
  // 转化图片成功后需要进行的操作
  const link = document.createElement('a');
  link.href = result;
  link.download = `gz${getTimeInfo()}${getRandom()}${getRandom()}}.png`;
  link.click();
};