html2canvas 踩坑记录 - HTML转图片

html2canvas “Screenshots with JavaScript”，把html转成canvas，也就可以转成图片。比如页面截图、生成活动海报等实用场景。在使用过程有一些坑 ，需要注意一下。

在线图片跨域

因为canvas中安全机制，加载图片时不允许跨域加载。

解决方案

1. 配置html2canvas的参数allowTaint或者useCORS设置为true

两者都可以设置跨域，但是不能同时使用，使用allowTaint后canvas不能调用toDataURL和toBlob等转流方法。还需要注意图片从缓存加载的时候(图片已经加载过了，再次加载会从缓存中加载，http请求码是304)，不能正确获取到图片，这时候可以给图片地址加上时间搓防止缓存，比如'http://xxxx.com/1234567.png?v=' + new Date().getTime()

2. 把图片转成base64

图片转存到本地后，即就不存在跨域的问题了。把图片转成base64代码如下：

/**
* 网络图片转base64
* @param {String} imgUrl 图片地址
*/
export function networkImg2Base64(imgUrl) {
  return new Promise((resolve, reject) => {
    let image = new Image()
    image.crossOrigin = '*' // 跨域
    image.onload = function() {
      // 用canvas把图片转成base64
      let canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      let ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, image.width, image.height)
      try {
        let base64 = canvas.toDataURL('image/png')
        resolve(base64)
      } catch (error) {
        reject('浏览器不支持canvas转base64')
      }
    }
    image.onerror = function() {
      reject('图片加载失败')
    }
    // 给图片地址添加时间搓参数
    image.src = UrlUtils.addParameter(imgUrl, {
      v: new Date().getTime() // 处理缓存，防止304
    })
  })
}

3. 服务器端处理

跨域是JavaScript特有的机制，所以服务器端可以直接处理。

自己服务器的图片，服务器端把设置Access-Control-Allow-Origin的值为 *，或者指定域名。

第三方图片资源，可以用服务器做代理转发，或者图片转存。

生成的canvas位置偏移

可能的原因

1. 页面滚动。页面的上下、左右滚动都可能会导致html2canvas生成的图片位置有偏移。
2. html2canvas的div容器在弹窗浮层中。
3. 子元素的相对位置偏移。 比如在移动端没做屏幕适配处理，导致子元素在容器之外。

解决方案

1. 动态计算页面的滚动位置，手动设置html2canvas的scrollX和scrollY参数。
2. 强制把页面滚动到初始位置。window.scrollTo(0, 0)。
3. html2canvas容器使用fixed定位。position: fixed; left: 0; top: 0;， 如果不需要显示该容器，可使用z-index: -1，降低层级隐藏。
4. 确保所有子元素的定位都是在容器内。

生成的图片清晰度差

html2canvas中使用scale来控制canvas的像素比率，默认为浏览器设备像素比率window.devicePixelRatio，可以通过调整scale参数来控制清晰度。值越大，越清晰，生成的图像文件也就越大。

微信中不能长按保存

原因：把canvas转成base64后，base64文件太大。

解决方案

1. 降低图片清晰度。把html2canvas的scale参数调小一点
2. 把图片存储到服务器后再显示