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