html2canvas

一、使用

1、安装

npm install --save html2canvas

2、引入

import html2canvas from "html2canvas";

3、封装方法和使用

//方法
convertToImage(container, options = {}){
  //document.body.scrollTop = document.documentElement.scrollTop = 0;//解决渲染不完整问题
  // 设置放大倍数
  const scale = window.devicePixelRatio; 
  // const scale = 2;        //最好用2，避免不同电脑浏览器产生效果不同
  // 传入节点原始宽高
  const width = container.offsetWidth;
  // const width = 375;
  const height = container.offsetHeight;
  // html2canvas配置项
  const ops = {
    scale,
    width,
    height,
    useCORS: true,
    allowTaint: false,
    ...options
  };
  return html2canvas(container, ops).then(canvas => {
    // 返回图片的二进制数据
    return canvas.toDataURL("image/png");
  });
}
//使用
async getImg(){
  this.imgBlobData = await this.convertToImage(this.$refs.container);
},

二、html包含图片，图不显示问题

当html中含有图片时，html2canvas对其进行渲染会产生跨域问题，解决方案如下：

1. 首先设置useCORS: true，不需要allowTaint: true

添加了allowTaint: true属性生成的canvas会导致toDataURL方法调用失败

html2canvas(document.getElementById('download'), {
  backgroundColor: null,
  useCORS:true,
  // width: document.getElementById('download').width,
  // height: document.getElementById('download').height,
  // scrollY: 0, 
  // scrollX: 0,
  // logging:true
}).then((canvas) => {
  let url = canvas.toDataURL('image/png');
  this.$refs.downimg.src = url
  this.imgUrl = true
})

2. img标签设置crossorigin=”anonymous” 属性

3.清理浏览器缓存或者给img的url后面拼上伪版本号，像这样

三、html2canvs文字重叠问题

在要转化的html的css中添加属性

letter-spacing: 0.5px;