h5生成海报

实现技术

• vue
• html2canvas

思路

将DOM转为图片，实现生成海报

上代码

1. 在vue项目中下载插件

   npm install html2canvas    //默认下载最新版本
   // 不要下最新版本，一般来说最新版本的前一两个小版本最合适(比较稳定)
   npm install html2canvas@1.4.1   // 下载指定版本
   

2. 局部引入(在你需要生成海报的文件中引入)

   import html2canvas from 'html2canvas'
   ​
   //js
       DomToImage() {
         // 页面loading
         this.showLoading = true
          // 要将DOM转为image的元素
         const node = this.$refs.pop
         html2canvas(node, {
           useCORS: true, // 允许图片跨域
           height: node.offsetHeight,
           width: node.offsetWidth,
           scrollY: 0,
           scrollX: 0,
           allowTaint: true,
           backgroundColor: null // 背景色
         }).then(async canvas => {
           // png 格式背景透明   jpeg格式自带黑色背景   
           let url = await canvas.toDataURL('image/png')  // 转为base64  默认转为png
           this.imgUrl = url  // 这一步比较重要     
           this.showLoading = false
         })
       }
   

   为什么代码要写成 this.imgUrl = url 而不是直接写成 this.imgUrl = canvas.toDataURL('image/png')

   在ios系统中，不支持动态渲染图片

   //html
   <img ref="img"   />
   //js
   this.$refs.img.src = 'xxxx'   //这种写法再ios上  就会出现图片空白的原因
   ​
   ----------------------------------------------------------
   //html
   <img :src="src" />
   // js
   this.src = 'xxxxx'   //换成赋值写法，在ios中就解决了图片不能显示的问题
   

   如果还不能解决的话，我之前看到过有博主说是因为html2canvas版本过高的原因，降到指定版本就行

   npm i html2canvas@1.0.0-rc.4;
   

   详见：blog.csdn.net/YAN_wenhao/…