欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html2Canvas将html转化成图片

程序员文章站 2022-03-31 09:35:32
...

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结构样式放大一倍来设置,最后缩小一倍显示在页面中
相关标签: vue html2canvas