html2canvas html 转图片的用法

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

第一步引入js

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

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

HTML页面

    
Hello world!
    

 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 宽度很宽的那种,那样截图出来的效果就很小