账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    html2canvas合成图片的时候,dom中的一些图片出不来,而且是偶现的,页面没有报错
    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
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 落叶满屋 普通会员 1楼

      这个问题可能是由于多种原因导致的,例如浏览器的渲染性能、网络问题、图片大小不匹配等。以下是一些可能的解决方法:

      1. 浏览器的渲染性能:如果图片大小与页面内容不匹配,那么浏览器可能会将图片抽离出来。您可以尝试减少图片的大小,或者使用JavaScript的canvas.toDataURL()方法将图片转换为数据URL,然后在页面中使用img.src属性加载。

      2. 网络问题:如果图片的网络请求失败或者超时,那么图片可能无法加载。您可以检查网络连接是否正常,或者尝试使用asyncawait语句等待图片加载完成。

      3. 图片大小不匹配:如果图片的大小与页面内容不匹配,那么浏览器可能会将图片抽离出来。您可以尝试调整图片的大小,使其与页面内容匹配。

      4. 代码问题:如果代码中存在错误,那么图片可能无法加载。您可以检查代码,看看是否存在可能导致图片无法加载的问题。

      5. 浏览器的兼容性问题:如果图片在某些浏览器中无法显示,那么可能是浏览器的兼容性问题。您可以检查浏览器的版本和是否安装了浏览器的插件,看看是否可以解决兼容性问题。

      如果您尝试了上述方法仍然无法解决问题,那么可能需要联系网站的管理员,提供更多的信息,如代码、错误日志等,以便他们进行更深入的排查。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部