小程序海报

<canvas class="canvas-bg" canvas-id="shareCanvas" id="shareCanvas"></canvas>
getCanvas() {
      var that = this
      const image1 = new Promise(function(resolve, reject) {
        uni.getImageInfo({
          src: '图片1',
          success(res) {
            resolve(res)
          }
        })
      })
      const image2 = new Promise(function(resolve, reject) {
        uni.getImageInfo({
          src: '图片2',
          success(res) {
            resolve(res)
          }
        })
      })
      const image3 = new Promise(function(resolve, reject) {
        uni.getImageInfo({
          src: '图片3',
          success(res) {
            resolve(res)
          }
        })
      })
      const image4 = new Promise(function(resolve, reject) {
        uni.getImageInfo({
          src: that.qrcodeUrl,
          success(res) {
            resolve(res)
          }
        })
      })
      Promise.all([image1, image2, image3, image4]).then(function(res) {
        var context = uni.createCanvasContext('shareCanvas')
        context.drawImage(res[0].path, 0, 0, 375, 537)

        // 设置邀请信息图标
        context.drawImage(res[2].path, -15, 320, 410, 240)
        // 邀请人名字
        context.setFontSize(18)
        context.setFillStyle('#333333')
        context.setStrokeStyle('#333333')
        context.font = 'normal bold 18px Source Han Sans CN'
        context.fillText(that.invitorName, 50, 390, 350)
        // 
        context.setFontSize(14)
        context.setFillStyle('#333333')
        context.setStrokeStyle('#333333')
        context.font = 'normal bold 14px Source Han Sans CN'
        context.fillText('自由职业', 50, 410, 350)
        // 
        context.setFontSize(18)
        context.setFillStyle('#333333')
        context.setStrokeStyle('#333333')
        context.font = 'normal bold 18px Source Han Sans CN'
        context.fillText('天天向上', 160, 440, 350)
        // 
        context.setFontSize(14)
        context.setFillStyle('#C9A351')
        context.setStrokeStyle('#C9A351')
        context.font = 'normal 14px Source Han Sans CN'
        context.fillText('天天向上', 130, 470, 200)

        context.setFontSize(14)
        context.setFillStyle('#C9A351')
        context.setStrokeStyle('#C9A351')
        context.font = 'normal 14px Source Han Sans CN'
        context.fillText('天天向上', 130, 490, 200)
        // 设置图标
        context.drawImage(res[1].path, 130, 425, 25, 15)
        // 二维码图片
        context.drawImage(res[3].path, 50, 425, 70, 70)

        context.draw()
        setTimeout(function() {
          uni.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 375,
            height: 537,
            destWidth: 375,
            destHeight: 537,
            canvasId: 'shareCanvas',
            success: function(res) {
              that.canvasImage = res.tempFilePath
			  uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success: function() {
				  uni.hideLoading()
				  that.showToast('图片保存成功')
				},
				fail:function(res){
				  uni.hideLoading()
				}
			  })	
			  // console.log(res.tempFilePath)
            },
            fail: function(res) {
				uni.hideLoading()
			}
          })
        }, 500)
      })
    },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值