将Dom元素转成图片并下载

1.引入html2canvas.js(可以npm,也可以直接引入包http://cdn.bytedance.com/?query=html2canvas&version=1.4.1)
2.使用
（1）html:codeContent是要转成图片的dom元素，content是要生成的图片的区域

// 需要转成图片的元素
  
        
          {{ creatData.couponName }}
          
            
          
          请于 {{ creatData.couponExpiredTime }} 前使用
          
        
      
// 生成图片的区域
  
 保存二维码

（2）css

.codeContent{
 height: 900rpx;
  width: 620rpx;
}
//设置成跟codeContent等宽高，
.content{
  height: 900rpx;
  width: 620rpx;
  position: absolute; // 这里是因为业务不需要让content展位，可不加
}

(3) js

   downImg() {
    html2canvas(document.querySelector('.codeContent')).then(canvas => {
      const imgUrl = canvas.toDataURL('image/jpeg')
      const image = document.createElement('img')
      image.src = imgUrl
      // 将生成的图片放到 类名为 content 的元素中
      document.querySelector('.content').appendChild(image)
      const a = document.createElement('a')
      a.href = imgUrl
      // a.download 后面的内容为自定义图片的名称
      a.download = 'code_download'
      a.click()
     })
  },