canvas 画布

<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)
      })
    },
上一篇:android访问应用程序第2步:实现hal层


下一篇:二、RT-Thread启动流程详解(硬件初始化篇)