持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

准备工作

在开发中经常会遇到邀请或者分享页面需要生成海报分享，生成海报需要用到html2canvas插件，页面里一般都带有二维码，所以还需要一个生成二维码的插件，和一个弹出层组件，html2canvas插件通过npm install html2canvas --save命令下载,二维码和弹出层可以在uniapp的插件市场搜索直接下载

生成二维码

二维码的生成需要一个canvas，设置canvas的id和宽高

<view class="qr_code">
        <canvas canvas-id="qrcode" v-show="qrShow" style="width: 110rpx;height: 110rpx;"/>
</view>

我们需要进入邀请页面的时候就生成好了二维码，首先引入uqrcode.js文件，在created生命周期函数里调用uqrcode.js的方法，传入id，内容，大小，边距等等

import uQRCode from '../../../common/js/uqrcode.js'

created() {
        this.qrcode('https://www.baidu.com/')//传入你要传入二维码的内容
},
methods:{
    qrcode(text){
        this.qrShow=true
        uQRCode.make({
                canvasId: 'qrcode',//canvas-id
                componentInstance: this,
                text: text,//二维码内容
                size: 55,//二维码大小
                margin: 0,//间距
                backgroundColor: '#ffffff',//背景颜色
                foregroundColor: '#000000',//二维码颜色
                fileType: 'jpg',//文件类型
                errorCorrectLevel: uQRCode.errorCorrectLevel.H,
                success: res => {
                        console.log(res);
                }
        })
    },
}

ok，这样我们的二维码就出来了

复制链接

一般除了二维码还有邀请码，点击按钮实现复制邀请码，这个可以用uniapp内置的api，uni.setClipboardData()

<view class="contents">
        <view class="text">
                邀请码
        </view>
        <view class="code">
                {{code}}
        </view>
</view>
<button class="poster-btn" @click="copy(code)">复制邀请码</button>

//复制
copy(data){
    uni.setClipboardData({
        data,
        success() {
                console.log('success');
        }
    })
},

当我们点击复制的时候就会弹出弹窗提示

生成海报

一个简陋的页面大概就完成了

当我们点击生成海报按钮的时候就会将整个页面生成一张海报图片，先将下载好的html2canvas插件导入，然后传入相应的信息即可生成一张图片，但是这个插件需要传入id，但是在app端的话是操作不了dom的，对此，uniapp为我们提供了一个解决办法，让我们可以在app端操作dom：

renderjs可以在视图层操作dom，那么如何去使用renderjs呢？只需要新建一个script节点，设置lang为renderjs，在这个renderjs里操作dom生成海报

//service层
<script>
     export default {
     
     }
</script>

//renderjs
<script module="canvas" lang="renderjs">
     export default {
     
     }
</script>

导入html2canvas插件，在生成海报的方法里使用document.getElementById()获取要生成海报区域的id传入html2canvas方法里生成canvas，在canvas对象里设置海报的一些属性，如：背景颜色，宽高等等，再使用canvas的toDataURL()转为base64格式的图片

<script module="canvas" lang="renderjs">
 import html2canvas from "html2canvas"
 export default {
  methods:{
   async toImage(event,ownerInstance){
    try{
     const timeout=setTimeout(async ()=> {
      const htmlCanvas=document.getElementById('htmlCanvas')
      const canvas=await html2canvas(htmlCanvas,{
       backgroundColor: null,
       useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      })
      const url = canvas.toDataURL('image/png')
      this.$ownerInstance.callMethod('creates',{//可以调用service层的方法
       url
      })
      clearTimeout(timeout)
     }, 500);
    }catch(e){
     //TODO handle the exception
     console.log(e);
    }
   },
  }
 }
</script>

通过this.$ownerInstance.callMethod()将生成好的base64格式的图片传给service层的方法

//生成海报
creates(options){
    console.log(options); 
    this.imgUrl = options.url//用于展示海报
},

为了让海报显示出来，我们使用下载好弹出层组件，图片生成完成的时候弹出弹出层将图片展示出来，且可以分享到微信，朋友圈，qq等等选项，下面是我的生成海报的一个效果，具体的展示的样式和内容可以自行设置

关于分享的操作可以看看之前写的uniapp多端分享（app，小程序，公众号）这篇文章，不过海报生成只能在h5和app，小程序是不能生成的，因为renderjs不支持小程序端

uniapp-生成海报

准备工作

生成二维码

复制链接

生成海报