uniapp小程序生成海报-直接CV

一个简单的案例：以上则是绘制生成的图片，是由一个背景图片，两个二维码，两行文字组合绘制出的，点击保存按钮即可保存到手机相册（注意所有的在线图片域名都需要在小程序后台配置，否则无法保存）。

其中，"扫码关注-雪天前端" 这一行文本可以通过输入框修改，然后点击重新生成按钮即可重新绘制海报。当然，涉及到的所有元素，无论是背景图，还是二维码或者文字，都可以更换，这里只更改这一行文字，其他的更换大同小异，具体看代码吧。

以下是源码，注释详细，可直接CV见效：

<template>
  <view class="">
    <button @click="setImg()">生成海报</button>
    <canvas :style="{ height: lineBgHeight + 'px;width: 100%;' }" class="gc-canvas"
      canvas-id="firstCanvas"></canvas>
      <input class="ipt" type="text" v-model="txts" placeholder="修改公众号名称">
      <button @click="changeTxt">重新生成</button>
      <button @click="saveImage(myImgs)">保存海报</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        txts:'扫码关注-雪天前端',
        lineBgHeight: "",
        erweimaPath: "",
        erweimaOnePath: "",
        myImgs:'', // 最终生成的图片地址
      }
    },
    onShow() {
      this.init()
    },
    methods: {
      //1. 拿到二维码图片地址 用uni.getImageInfo格式化 存于data
      // 在这里可以换图片二维码 一般来自于接口返回或者本地上传
      init(){
        var erweima = 'https://mp-b49e6420-3bf3-44d1-80b5-8c9e8659e39c.cdn.bspapp.com/webPage/home/my.jpg';
        var erweimaOne = 'https://mp-b49e6420-3bf3-44d1-80b5-8c9e8659e39c.cdn.bspapp.com/webPage/home/my.jpg';
        var that = this;
        uni.getImageInfo({
          src: erweima,
          success: function(res) {
            console.log(JSON.stringify(res))
            that.erweimaPath = res.path
          },
        })
        uni.getImageInfo({
          src: erweimaOne,
          success: function(res) {
            console.log(JSON.stringify(res))
            that.erweimaOnePath = res.path
          },
        })
        
      },
      // 2. 生成图片
      setImg() {
        var that = this;
        // 背景图片
        var bgc = 'https://img0.baidu.com/it/u=126160900,2934834914&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500';
        uni.getImageInfo({
          src: bgc,
          success: function(res) {
            //创建canvas
            let getWindowInfo = uni.getWindowInfo()
            let winWidth = getWindowInfo.windowWidth //屏幕宽度
            let bWidth = winWidth / 375
            that.lineBgHeight = parseInt(130 * bWidth);
            const ctx = uni.createCanvasContext('firstCanvas', that);
            //背景 画出图片
            ctx.drawImage(res.path, 0, 0, winWidth, 130 * bWidth); 
            //二维码1 画出图片
            ctx.drawImage(that.erweimaPath, 180 * bWidth, 26 * bWidth, 80 * bWidth, 80 *
            bWidth); 
            //二维码2 画出图片
            ctx.drawImage(that.erweimaOnePath, 278 * bWidth, 26 * bWidth, 80 * bWidth, 80 *
            bWidth); 
            
            setTimeout(() => {
              var code = "微信公众号";
              ctx.setFontSize(16) //设置字体大小，默认10
              ctx.fillStyle = "#ffffff";
              ctx.fillText(code, 20 * bWidth, 45 * bWidth); //文字内容、x坐标，y坐标
              
              var sizeName = that.txts;//可修改文字
              ctx.setFontSize(parseInt(14 * bWidth)) //设置字体大小，默认10
              ctx.fillStyle = "#ffffff";
              ctx.fillText(sizeName, 20 * bWidth, 85 * bWidth); //文字内容、x坐标，y坐标
              //开始制作
              ctx.draw(false, () => { 
                //使用定时是因为制作水印需要时间，设置定时才不会出bug
                setTimeout(() => { 
                  //将画布中内容转成图片，即水印与图片合成
                  uni.canvasToTempFilePath({ 
                    x: 0,
                    y: 0,
                    width: winWidth, // 截取的画布的宽
                    height: 130 * bWidth,
                    destWidth: winWidth * 10,
                    destHeight: parseInt(130 * bWidth) *
                      10,
                    canvasId: 'firstCanvas',
                    success: (v) => {
                      console.log("图片临时地址" +
                        v.tempFilePath)
                        // 把绘制的地址存于data中 以供下载时传给下载函数
                      that.myImgs = v.tempFilePath
                    },
                    fail: (e) => {}
                  }, that)
                }, 200)
              })
            }, 500);
          },
        })
      },
      
      // 修改文字
      changeTxt(){
        this.setImg()
      },
      
      // 保存图片
      saveImage(url) {
        uni.showLoading({
          title: '下载中...'
        })
        uni.downloadFile({
          url: url,
          success(res) {
            if (res) {
              console.log('下载成功', res)
              uni.hideLoading();
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res);
                  uni.showToast({
                    title:"保存成功"
                  })
                },
                fail(res) {
                  console.log(res);
                  uni.showToast({
                    title:"保存失败"
                  })
                },
              });
            }
          },
          fail: (err) => {
            if (err) {
              console.log('下载失败', err)
              uni.hideLoading();
            }
          }
        });
      },
    },
  }
</script>

<style>
  .ipt{
    display: block;
    width: 78%;
    margin: 30rpx auto;
    height: 60rpx;
    padding-left: 20rpx;
    color: #333;
    border: 2rpx solid #333;
  }
</style>

此文若有用，求个赞可否？

本文首发于微信公众号：雪天前端， 欢迎扫码关注！