html2canvas生成图片

工作原理

html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（参考地址）

引入html2canvas

<script src="./html2canvas.min.js"></script>
下载地址

基本语法

<div id="cvs-box">
<img style="width: 100px;" id="test-img" crossorigin="anonymous" src="https://img.alicdn.com/imgextra/i4/1043899953/O1CN01aqVriA2NOWgJofVfU_!!0-item_pic.jpg" alt="">
</div>
<img src="" id="test" style="width: 1200px;height: 500px;" alt="">

js
//参数
//allowTaint: true是否允许跨域
//useCORS:true是否尝试加载跨源图像作为CORS服务，在返回到代理（用来解决图片跨域加载问题）
//width，height，宽高
function createdcvs(params) {
    html2canvas(document.querySelector("#cvs-box"),
    {width:1200,height:500,allowTaint: true,useCORS:true}).then(canvas => {
      document.querySelector("#box1").appendChild(canvas)
      document.getElementById("test").src= canvas.toDataURL();
    });
  }

出现的问题

1.背景图片模糊
解决方案：使用img标签来实现background-image的效果
2.html2canvas生成的整个图片糊

		let contentWidth =  600// 获得dom节点的宽
         et contentHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 获得dom节点的高
          let canvas = document.createElement('canvas')
          let scale = 2  // 解决清晰度问题，先放大 2倍
          canvas.width = contentWidth * scale // 将画布宽&&高放大两倍
          canvas.height = contentHeight * scale
          canvas.getContext('2d').scale(scale, scale)

          let opts = {
            scale: scale,
            canvas: canvas,
            width: contentWidth,
            height: contentHeight,
            useCORS: true,
            background: '#ffffff'
          }
html2canvas(document.querySelector('#index'), opts).then(canvas=>{
	//将canvas生成的地址放到图片内
      document.getElementById("test").src= canvas.toDataURL('image/png', 1.0);
})

2.图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置

3.跨域加载的图片会污染canvas，进而导致canvas无法导出数据

解决方案一、
给html2canvas设置useCORS:true加载跨域图像的配置，并且保证给每个图片添加添加crossOrigin="anonymous"属性
解决方案二、将文件读入到blob文件对象，然后用URL.createObjectURL()方法转换成img src可用的地址，然后再转canvas
注意：读入blob文件时保证要设置的img标签内的src为空，在读入文件完成后在调用生成图片函数

//将文件读入到blob文件在转img的方法
function getImage (url,imgId) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        if (this.status == 200) {
            document.getElementById(imgId).src =  URL.createObjectURL(this.response);
        }
    };
    xhr.send();
    
}
let urltest = 'https://img.alicdn.com/imgextra/i4/1043899953/O1CN01aqVriA2NOWgJofVfU_!!0-item_pic.jpg'
getImage(urltest,'test-img')

//html2canvas生成图片的方法
function createdcvs(params) {
    html2canvas(document.querySelector("#cvs-box"),{width:1200,height:500,allowTaint: true,useCORS:true}).then(canvas => {
      document.querySelector("#box1").appendChild(canvas)
      //将canvas生成的地址放到图片内
      document.getElementById("test").src= canvas.toDataURL();
    });
  }

// setTimeout(()=>{
//   createdcvs()
// },3000)