小程序canvas绘制自适应海报并生成图片

效果图

橘子可以放上小程序码或者其他什么码

代码:

wxml

 <!--画布--> 
 <canvas style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="firstCanvas"></canvas>
 <view class='main'>
 <!--提示标题-->
 <view wx:if='{{finishh}}'>(海报已生成,放大长按图片保存分享)</view>
 <!--生成的图片-->
 <image bindtap='preview' mode='widthFix' src='{{tempFile}}'></image>
 </view>

wxss

page{
  width: 100%;
  height: 100%;
  background: #ffa71f;
}
.main view{
  font-size: 26rpx;
  color: white;
  text-align: center;
  margin-top: 80rpx;
}
.save-button {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  bottom: 40rpx;
  right: 40rpx;
  border-radius: 50rpx;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
}

.save-button .share-image {
  position: absolute;
  top: 22rpx;
  left: 22rpx;
  width: 36rpx;
  height: 36rpx;
}
/*将canvas移到看不到的地方生成*/
canvas{
  position: absolute;
  left: 0;
  right: 0;
  top: -9999rpx;
  bottom: 0;
  margin: auto;
}
.main image{
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

JS

var app = getApp();
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    var that = this
    wx.showLoading({
      title: '生成中',
    })
    //设个定时器防止异步的问题
    setTimeout(function () {
      //初始化画布背景宽高及内容宽高变量
      var avatarUrl = app.globalData.userInfo.avatarUrl
      var myCanvasWidth  
      var myCanvasHeight  
      var myCanvasWidth1
      var myCanvasHeight1
      //获取手机屏幕尺寸并给画布宽高赋值
      wx.getSystemInfo({
        success: function (res) {
          console.log(res)
          // myCanvasWidth = res.windowWidth - 56
          // myCanvasHeight = res.windowHeight - 100
          myCanvasWidth = res.windowWidth
          myCanvasHeight = res.windowHeight
          myCanvasWidth1 = res.windowWidth 
          myCanvasHeight1 = res.windowHeight
        },
      })
      console.log(myCanvasWidth, myCanvasHeight)
      console.log("宽：" + parseInt(myCanvasWidth / 5), "高:" + parseInt(myCanvasHeight / 7.88))
      // var avatarurl_width = parseInt (myCanvasWidth / 5);    //绘制的头像宽度
      //将方形图片处理成圆形头像
      var avatarurl_heigth = parseInt(myCanvasHeight / 8);   //绘制的头像高度
      var avatarurl_width = avatarurl_heigth
      var avatarurl_x = myCanvasWidth / 2 - (avatarurl_width / 2);   //绘制的头像在画布上的位置
      var avatarurl_y = myCanvasHeight / 7 - (avatarurl_heigth / 2);   //绘制的头像在画布上的位置
      that.setData({
        canvasWidth: myCanvasWidth,
        canvasHeight: myCanvasHeight,
        canvasWidth1: myCanvasWidth1,
        canvasHeight1: myCanvasHeight1
      })
      //初始化画布
      var context1 = wx.createCanvasContext('firstsCanvas')
      context1.rect(0, 0, myCanvasWidth, myCanvasHeight)
      context1.setFillStyle('#ffa71f')
      context1.fill()
      context1.draw()
      // 使用 wx.createContext 获取绘图上下文 context
      var context = wx.createCanvasContext('firstCanvas')
      context.setFillStyle('#ffa71f')
      context.fillRect(0, 0, myCanvasWidth, myCanvasHeight)
      context.drawImage("/img/bak1.png", myCanvasWidth / 2 - ((myCanvasWidth - 50) / 2), myCanvasHeight / 2 - ((myCanvasHeight - 50)/2) , myCanvasWidth-50, myCanvasHeight-50)
      context.fill()
      // context.rect(0, 0, myCanvasWidth, myCanvasHeight)

      context.save();
      context.beginPath(); //开始绘制
      //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
      context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
      context.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

      context.drawImage("/img/public/avatar.jpg", avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
      context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
      context.setFontSize(20)
      context.setTextAlign('center')
      context.setFillStyle('#333333')
      context.fillText("用户名", myCanvasWidth / 2, myCanvasHeight / 4)
      context.setFillStyle('#333333')
      context.fillText("植物工厂生产研发", myCanvasWidth / 2, myCanvasHeight / 3)
      context.setFillStyle('red')
      context.fillText("5-8K", myCanvasWidth / 2, myCanvasHeight / 2.5)
      context.setFillStyle('#616161')
      context.setFontSize(15)
      context.fillText("武侯-红牌楼·1-3年·本科", myCanvasWidth / 2, myCanvasHeight / 2.2)

      context.setFillStyle('#ffa71f')
      context.setFontSize(15)
      context.fillText("入职赏200.00元      推荐赏200.00元", myCanvasWidth / 2, myCanvasHeight / 1.95)
      /*小程序码*/
      context.drawImage("/img/test.jpg", myCanvasWidth / 2 - (myCanvasHeight / 10), (myCanvasHeight) / 1.6, myCanvasHeight / 5, myCanvasHeight / 5)
      context.setFillStyle('#333333')
      context.setFontSize(14)
      context.fillText("成都xxxxx公司  正在招聘", myCanvasWidth / 2, myCanvasHeight / 1.15)
      context.setFillStyle('#999999')
      context.setFontSize(12)
      context.fillText("(长按识别,了解职位详情)", myCanvasWidth / 2, myCanvasHeight / 1.1)
      context.draw()
    
     //定时器作用同上
      setTimeout(function () {
        wx.hideLoading();
        that.setData({
          finishh:true
        })
        //将canvas转换成图片
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvasId: 'firstCanvas',
          success: function (res) {
            console.log(res)
            var tempArr = []
            tempArr.push(res.tempFilePath)
            that.setData({
              tempFile: tempArr
            })
          },
          fail: function (res) {
          }
        })
      }, 1000)
    }, 1000)



  },
  data:{
    tempFile:[],
    finishh:false
  },
  preview:function(){
    wx.previewImage({
      urls: this.data.tempFile,
    })
  },
})

这样就可以绘制一张海报然后生成图片保存分享了