html2canvas踩坑记录

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代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    /**
    * 网络图片转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
    })
    })
    }
    1. 服务器端处理

    跨域是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. 把图片存储到服务器后再显示
坚持原创技术分享,您的支持将鼓励我继续创作!