ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

canvas 画布

2021-04-19 17:01:13  阅读:139  来源: 互联网

标签:function canvas resolve success res 画布 context uni


<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)
      })
    },

标签:function,canvas,resolve,success,res,画布,context,uni
来源: https://blog.csdn.net/weixin_57033986/article/details/115868677

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有