微信小程序-海报生成

应用场景：一般是需要生成海报时跳转到新页面，先看一下海报整体预览的效果，然后在点击这个页面的保存来保存海报

步骤

• 点击海报生成,跳转页面

• 进入该海报页面要有一个加载效果

• 加载数据,显示图片效果，用canvas生成海报

  • 1.使用canvas在wxml页面占位
  • 2.给canvas添加一个id，类型选择2d，宽高都要自适应
  • 3.在函数中使用wx.createSelectorQuery()来初始化canvas
  • 4.在ready函数中使用该函数，并且保存canvas到data中

• 通过页面中的按钮来触发wx.canvasToTempFilePath把生成后的数据及形状绘制成图片

• 点击保存弹出一个加载效果

• 成功保存就地址给手机的地址,失败提示

• 涉及到获取二维码

  • 可以先生成二维码，然后通过数据传递到canvas中对应的位置

示例

/*wxml*/
<view class="cantainer">
  <canvas id="Canvasbg" type="2d" style=" width: 100%; height: 100vh;"  class="poster"/>
  <!-- <canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" /> -->
  <view class="cantainer-bottom">
      <view class="info">
        <text >图片已生成,保存发布出来让朋友点赞吧!</text>
      </view>
      <button class="btn" size="default" bind:tap="saveImage">保存</button>
  </view>
</view>
/*sass*/
.cantainer{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: skyblue;
  height: inherit;
  &-bottom {
    display: flex;
    flex-direction: column;
    height: 600rpx;
    background-color: white;
    justify-content: center;
    align-items: center;

    .info {
      height: 100rpx;
      font-size: 32rpx;
      line-height: 32rpx;
    }
    .btn{ 
      background-color: var(--primary-color);
      width: 240rpx;
      height: 80rpx;
      color: white;
      border-radius: 40rpx;
    }
	}
}
/*ts*/
  data: {
    photo:"../../../asset/squase.jpg",
    imgUrl:"../../../asset/squase.jpg",
    name: 'demo',
    desc: '一个海报的demo',
    address: '小行星',
    canvas:'',
  },
  onReady() {
    this.draw()
  },
  draw() {
    wx.createSelectorQuery()
    .select('#Canvasbg')
    .fields({ node: true ,size: true})
    .exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      const width = res[0].width
      const height = res[0].height
      canvas.width = width * dpr
      canvas.height = height * dpr
      ctx.clearRect(0, 0, width, height)
      // 绘制底部白色背景
      ctx.save()
      ctx.fillStyle= 'white'
      ctx.fillRect(150,200,800,1000)
      ctx.restore()
      // 绘制图片 rect 矩形路径,fillRect 绘制矩形填充颜色
      // drawImage(图,图的x,图的y,图的宽,图的高)
      let img = canvas.createImage()
      img.src= this.data.imgUrl      
      img.onload =() =>{
        ctx.save()
        ctx.beginPath()
        ctx.rect(150,200,800,1000)          
        ctx.clip()
        ctx.drawImage(img,0,150,1000,550)
        ctx.closePath()
        ctx.restore()
      }
      // 绘制文本
      ctx.font="40px Arial"
      ctx.fillText(`N A M E: ${this.data.name}`,200,900)
      ctx.fillText(`A D D R E S S: ${this.data.address}`,200,980)
      ctx.fillText(`D E S C R I P T I O N: ${this.data.desc}`,200,1060)
      // 绘制头像 bug
      let photo =  canvas.createImage()
      photo.src= this.data.photo // 绘制图片一定要加上这个
      photo.onload = () => {
        ctx.save()
        ctx.beginPath()
        ctx.arc(830,900,100,0,2 * Math.PI)        
        ctx.clip()
        ctx.drawImage(photo,710,800,400,400)
        ctx.closePath()
        ctx.restore()
      }
      this.setData({
        canvas
      })
    })
  },
  saveImage() {
    // 生成图片
    const canvas =  this.data
    wx.showLoading({title:'海报生成中...'}),
    wx.canvasToTempFilePath({
      canvas,
      success: res => {
      // 生成的图片临时文件路径
      const tempFilePath = res.tempFilePath
      wx.hideLoading()
      },
      fail: err => {
        wx.hideLoading()
        console.log('保存失败，请重试!',err)
      }
		})
  }