html2canvas合成图片的时候,dom中的一些图片出不来,而且是偶现的,页面没有报错

发布于 2022-09-12 00:17:50 字数 1304 浏览 24 评论 0

html2canvas合成图片的时候,dom中的一些图片出不来,而且是偶现的,页面没有报错。
import html2canvas from 'html2canvas';
export default function convert2canvas(selector) {
const shareContent = document.querySelector(selector);
const width = shareContent.offsetWidth;
const height = shareContent.offsetHeight;
const canvas = document.createElement('canvas');
const scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext('2d').scale(scale, scale);
const opts = {

scale: scale,
canvas: canvas,
taintTest: false,
useCORS: true,
allowTaint: false,
logging: true,
width: width,
height: height

};
html2canvas(shareContent, opts).then(function(canvas) {

const img = new Image();
const url = canvas.toDataURL();
img.src = url;
img.onload = function() {
  top.postMessage(url, '*');
};
img.style.position = 'fixed';
img.style.top = '0';
img.style.bottom = '0';
img.style.left = '0';
img.style.right = '0';
img.style.width = '100%';
img.style.height = '100%';
img.setAttribute('id', 'poster');
const previousImg = document.getElementById('poster');
if (previousImg) {
  console.info(1);
  document.body.replaceChild(img, previousImg);
  return;
}
document.body.appendChild(img);

});
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文