vue 使用 html2canvas 把 H5 页面生成图片（海

最近在做活动页，有个 H5 页面生成海报图片的功能，本来想着用后端做，但需要把前端代码传到后端，后端在解析生成图片，返回前端，但这么虽然可以，但太麻烦了，并且耗时，虽然感觉减轻了前端的工作量，但后端工作量很大。让后就去网上搜了一下 DOM 转 png，尝试找一找有没有这样的库，就找到了 html2canvas 这个库。

记录一下用法，以及遇到的坑及解决方式:

1. 下载 npm i html2canvas 或 yarn add html2canvas
2. 生成图片

 productionImage() {
   // 手动创建一个 canvas 标签
   const canvas = document.createElement("canvas")
   // 获取父标签，意思是这个标签内的 DOM 元素生成图片
   let canvasBox = this.$refs.imageWrapper
   // 获取父级的宽高
   const width = parseInt(window.getComputedStyle(canvasBox).width)
   const height = parseInt(window.getComputedStyle(canvasBox).height)
   
  // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
   canvas.width = width * 2
   canvas.height = height * 2
   canvas.style.width = width + 'px'
   canvas.style.height = height + 'px'
  
   const context = canvas.getContext("2d");
   context.scale(2, 2);

   const options = {
     backgroundColor: null,
     canvas: canvas,
     useCORS: true
   }
   html2canvas(canvasBox, options).then((canvas) => {
     // toDataURL 图片格式转成 base64
     let dataURL = canvas.toDataURL("image/png")
     this.downloadImage(dataURL)
   })
 },

 downloadImage(url) {
  // 创建一个 img 标签，把图片插入到 DOM 中
   // 这里使用 img 是因为在客户端中，不能直接下载，要调用原生的方法
   const parents = this.$refs.selfReport
   const createImg = document.createElement('img')
   const insertEle = this.$refs.insetElement
   parents.insertBefore(createImg,parents.childNodes[0])
 
   createImg.setAttribute('src', url)

   // 如果是在网页中可以直接创建一个 a 标签直接下载 
     let a = document.createElement('a')
     a.href = url
     a.download = '文件名'
     a.click()
 },

说一下遇到的问题

1. 图片的跨域，如果生成的 DOM 元素中有包含图片，域名跟本地访问域名不一致的话，会出现跨域。
   添加 useCORS: true , 但我发现还可能会有跨域问题，还有两种解决方式是: 直接后端返回的图片转成 base64 或者 把图片放到统一域名下

2. 画出来的图片有白色的边框
   解决方式: 设置 backgroundColor: null 就可以了

把 H5 页面生成二维码，可以看我的另一个小文章 链接

其实很多场景下都是二维码+图片的方式，二者的顺序是先生成二维码，放到 DOM 中，在利用 html2canvas 把 DOM 生成图片。

最近发现一个小问题
我在网页中使用 html2canvas 时，即使使用的二倍图，将 canvas 放大两倍或者三倍之后，出现在效果还是模糊的一倍图，最后发现它好像和电脑屏幕的分辨率有关系，在自己 Mac 上和在扩展屏幕上生成的图片清晰度差了很多，解决方式: 就是在options 中写死 scale 的倍数。