html2Canvas将html转化成图片

2019-09-07 21:35:24 阅读：202 来源： 互联网

标签：html2canvas canvas allowTaint 转化成 base64 html2Canvas html true 图片

1、安装html2Canvs

npm install html2canvas --save

2、相应组件中引入html2Canvas

import  html2canvas  from  'html2canvas'

3、创建需要生成图片的html

<div id="sharePicBox">
    <div>需要生成图片的html</div>
</div>

4、html2canvas 生成canvas图片

// 注意：  allowTaint: true  和 useCORS: true 不能同时设置，两者只有一个起作用
let htmlDom = document.querySelector('#sharePicBox')
 html2canvas( htmlDom , {
    allowTaint: false,   //允许污染
    taintTest: true,    //在渲染前测试图片(没整明白有啥用)
    useCORS: true,      //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
    background: "#fff",
}).then(function(canvas) {
   callBack();          //回调
})

或者：
html2canvas( htmlDom , {
      allowTaint: false, //允许污染
      taintTest: true, //在渲染前测试图片(没整明白有啥用)
      useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
      background: "#fff",
      onrendered: function (canvas) {
            callBack();     //回调
      }
});

5、利用 canvas.toDataURL 将生成的图片转成 base64

//回调内容
imgBlob = canvas.toDataURL( 'image/jpeg', 1.0 );    //将图片转为base64

imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1 );        //截取base64以便上传

6、问题总结

6.1 生成图片裁剪不完整
    解决：将图片 html 放在页面根部，即相当直接放在 body 的内部

6.2 需要绘制的图片跨域问题
    解决： 1) 设置 useCORS: true,   使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
        2) img图片设置属性 crossorigin="anonymous"
        
6.3 转换base64不成功
    解决：allowTaint: true  允许污染，被污染的 canvas 是没法使用 toDataURL() 转 base64 流的

6.4 图片清晰度差
    解决：html结构样式放大一倍来设置，最后缩小一倍显示在页面中

标签：html2canvas,canvas,allowTaint,转化成,base64,html2Canvas,html,true,图片
来源： https://blog.csdn.net/weixin_43861543/article/details/100608300

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html2Canvas将html转化成图片