uniapp小程序生成海报学习笔记

<template>
  <view class="home">
    <button @click="setImg()">生成海报</button>
    <canvas :style="{ height: lineBgHeight + 'px;' }" 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:'扫码关注-开心就好1314',
        lineBgHeight: "",
        erweimaPath: "",
        erweimaOnePath: "",
        myImgs:'', // 最终生成的图片地址
      }
    },
    onShow() {
      this.init()
    },
    methods: {
      //1. 拿到二维码图片地址 用uni.getImageInfo格式化 存于data
      // 在这里可以换图片二维码 一般来自于接口返回或者本地上传
      init(){
        var erweima = '../../static/qrcode.jpg';
        uni.getImageInfo({
          src: erweima,
          success: (res)=> {
            console.log(JSON.stringify(res))
            this.erweimaPath = res.path
          },
        })    
      },
      // 2. 生成图片
      setImg() {
        // 背景图片
        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: (res)=> {
            //创建canvas
            let getWindowInfo = uni.getWindowInfo()
            let winWidth = getWindowInfo.windowWidth //屏幕宽度
            let bWidth = winWidth / 375
            this.lineBgHeight = parseInt(130 * bWidth);
            const ctx = uni.createCanvasContext('firstCanvas', this);
            //背景 画出图片
            ctx.drawImage(res.path, 0, 0, winWidth, 130 * bWidth); 
            //二维码1 画出图片
            ctx.drawImage(this.erweimaPath, 180 * 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 = this.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中 以供下载时传给下载函数
                      this.myImgs = v.tempFilePath
                    },
                    fail: (e) => {}
                  }, this)
                }, 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 lang="scss" scoped>
  .ipt{
    display: block;
    width: 78%;
    margin: 30rpx auto;
    height: 60rpx;
    padding-left: 20rpx;
    color: #333;
    border: 2rpx solid #333;
  }
  .home{
	  width:100%;
	  .gc-canvas{
		  width: 750rpx;
	  }
  }
</style>