关于html2canvas生成图片空白问题 40 ¥

关于html2canvas生成图片空白问题

框架react + mobx

"html2canvas": "^1.0.0-rc.7"

<div className="csbox">
    111111111111111
    <div onClick={this.exportImage}>
        提交
    </div>
</div>


    var node = document.querySelector('.csbox')
    html2canvas(node)
      .then(canvas => {
        console.log(canvas)
        var data = canvas.toDataURL();//生成的格式
        console.log(data)
      })
      .catch(err => {
        console.log(err)
      })

生成的图片
图片说明




控制台输出
图片说明




其他一些具体的细节私聊

网上找了各种方法都尝试过了,我的页面能生成图片,问题出在图片只是一张白图,这里明显不涉及到滚动条和图片跨域,就是想问一下有没有同样遇到这种情况的兄弟

找到问题所在了css样式的定义可能会导致页面截图失败,我把项目里的px转rem的文件注释掉,页面成功生成图片了

2个回答

  function getmbtimainImg(){   
        var targetDom = $("#main");  
            var copyDom = targetDom.clone();  
            copyDom.width(targetDom.width() + "px");  
            copyDom.height(targetDom.height() + "px");  
           // $('body').append(copyDom);  
            html2canvas(copyDom, {  
                allowTaint: true,  
                taintTest: false,  
                onrendered : function(canvas) {  
                    var data = canvas.toDataURL("image/png");//生成的格式

            }  
            });      
    }

https://blog.csdn.net/PT1993/article/details/90311409

你试下下面代码,我把div的className改成了class

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script>

<div class="csbox">
    111111111111111
    <input type=button onclick="show()" value="提交"/>     
</div>
<br/>

<script>
function show(){
    var node = document.querySelector('.csbox')
    html2canvas(node)
      .then(canvas => {        
        document.body.appendChild(canvas)
      })
      .catch(err => {
        console.log(err)
      })
}

</script>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐