html2canvas html 转图片的用法

在项目中遇到html2canvas 转图片的操作,这里记录下步骤和遇到的坑

第一步引入js

<script language="javascript" src="html2canvas.js"></script>

第二步 html 有一个块用于截图的元素

HTML页面

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <img width ="130" height = "140"
    src ="www.123.com/d07640e752a54f7e932dcaa98e1cd89b.png"
    crossorigin="anonymous"
        class="imgs"
    >
</div>

 JS 输出截图的元素

html2canvas(document.querySelector("#capture"),{
  allowTaint: true,useCORS:true,width:1200,height:500,
}).then(canvas => {

    //document.body.appendChild(canvas);
    //console.info(canvas.toDataURL('image/png'));

    var img = document.getElementById("test");
    img.src = canvas.toDataURL('image/png');

});

第三步就行输出了

 

 这里说下遇到的坑

1.网络图片跨域问题, 前端这边img标签需要加上 crossorigin="anonymous" ,加上这个标签,如果图片就直接不显示了,那就是跨域了,遇到在网络图片那边配置跨域设置, html2canva 这边加上  allowTaint: true,useCORS:true

2.图片打印尺寸问题, 截图是根据你元素的尺寸来的,如果你用的div 宽度很宽的那种,那样截图出来的效果就很小