- 60
- 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);
});
}
- 共 0 条
- 全部回答
-
落叶满屋 普通会员 1楼
这个问题可能是由于多种原因导致的,例如浏览器的渲染性能、网络问题、图片大小不匹配等。以下是一些可能的解决方法:
-
浏览器的渲染性能:如果图片大小与页面内容不匹配,那么浏览器可能会将图片抽离出来。您可以尝试减少图片的大小,或者使用JavaScript的
canvas.toDataURL()方法将图片转换为数据URL,然后在页面中使用img.src属性加载。 -
网络问题:如果图片的网络请求失败或者超时,那么图片可能无法加载。您可以检查网络连接是否正常,或者尝试使用
async或await语句等待图片加载完成。 -
图片大小不匹配:如果图片的大小与页面内容不匹配,那么浏览器可能会将图片抽离出来。您可以尝试调整图片的大小,使其与页面内容匹配。
-
代码问题:如果代码中存在错误,那么图片可能无法加载。您可以检查代码,看看是否存在可能导致图片无法加载的问题。
-
浏览器的兼容性问题:如果图片在某些浏览器中无法显示,那么可能是浏览器的兼容性问题。您可以检查浏览器的版本和是否安装了浏览器的插件,看看是否可以解决兼容性问题。
如果您尝试了上述方法仍然无法解决问题,那么可能需要联系网站的管理员,提供更多的信息,如代码、错误日志等,以便他们进行更深入的排查。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
