关于html2canvas用法的总结

最近H5项目有个功能需求：长按微信网页保存为截图。本人使用了html2canvas.js实现，感觉效果还不错，有几个注意点和大家分享一下。

html2canvas官网： https://html2canvas.hertzen.com/

使用的版本是最新版本：^1.0.0-alpha.12

html2canvas 可以将一个元素渲染为canvas。需要注意的是，Vue使用v-if和v-show的时候html2canvas无法将元素渲染为canvas。在我的项目之中存在一个骨架屏，这里我的解决方案是对要渲染的网页采用position:absolute为其增加一个蒙层。

生成canvas之后可以采用canvas.toDataURL("image/png")将canvas转化为base64。

关于清晰度问题：在Android手机上，生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度，在html2canvas之中存在一个参数scale，这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。

最后，如果网页之中存在较大的图片，可能导致html2canvas生成canvas的时候图片还没有加载完，从而致使排版错乱。可以判断一下图片是否加载完。

1.出现跨域的情况

这种情况只会出现在html2Canvas需生成的海报中的图片与当前环境不在同一个域下

2.解决方案

处理跨域，将接口返回的url处理为base64再进行处理或者后端直接返回base64

3.如何将url转换为base64？（利用canvas的toDataURL属性将url转为base64）

  function getImageBase64Data(imgSrc) {

    function getBase64(img) {

      let canvas = document.createElement("canvas")

      canvas.width = img.width

      canvas.height = img.height

      let ctx = canvas.getContext("2d")

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      let dataURL = canvas.toDataURL('image/jpeg')

      return dataURL

    }

    let baseUrl = new Promise(function (resolve, reject) {

      let image = new Image()

      image.crossOrigin = '*'// 图片处理跨域

      if (imgSrc.indexOf('data:image/jpegbase64') >-1) {

        image.src = imgSrc + '?v=' + Math.random()// 处理图片从缓存获取

      } else {

        image.src = imgSrc

      }

      image.onload = function () {

        let imageBase64Data = getBase64(image)

        resolve(imageBase64Data)

      }

    })

    return baseUrl

  }

4.使用html2Canvas生成海报

  const download = () => {

    let content = document.getElementById('promote-content')

    if (content) {

      html2canvas(content, { useCORS: true, allowTaint: true }).then(res => {

        const imgBase64 = res.toDataURL('image/jpeg')

        let link = document.createElement('a')

        link.style.display = 'none'

        link.href = imgBase64

        link.setAttribute('download', name + moment().format('YYYYMMDDHHmm'))

        document.body.appendChild(link)

        link.click()

        document.body.removeChild(link)

      })

    }

  }

html是超文本标记语言本身没有任何编程的意义，类似XML结构，是节点-》子节点然后一层一层递进的。

html主要是靠浏览器解析html标签和样式展示给用户，所以在本质上，所有版本的html都其实是一样的。

唯一的区别是浏览器是否支持新的html标签（有些标签也由于过时而废除）。

所以html5和html2除了对支持的标签的不同外，于浏览器和用户说，是没有区别的。

---