如何生成动态海报--将页面元素转为图片html2canvas

项目需求生成动态海报：比如背景图固定，一些文案和头像等需要动态生成，可以使用html2canvas插件：

基础用法

handleCanvas () {
// 用法：html2canvas(dom,{options}).then(canvas => {})
html2canvas(this.$refs.extendCapture, {
        allowTaint: true,
        useCORS: true 
      }).then(canvas => {
      // canvas.toDataURL可转成base64图片
        let dataURL = canvas.toDataURL('image/png')
        if (dataURL !== '' && dataURL !== 'data:,') {
          this.imgUrl = dataURL
        }
      })
    }

具体可见官网：https://www.npmjs.com/package/html2canvas

常见问题

1、dom内包含图片跨域，转成canvas后不显示

设置参数可跨域：

{ allowTaint: true, useCORS: true }

2、图片清晰度不够

不要用background,尽量用img标签

3、ios11.4在微信中html2canvas不执行

修改插件版本为rc4，或改源码，具体见：https://blog.csdn.net/cindy647/article/details/109123101

参考文档：
https://www.jianshu.com/p/abd9e9c5ba20