小程序绘制海报和保存到手机相册

258 阅读1分钟

示例: 1.绘制一张有背景图片,二维码和标题的海报,首页先获取背景图片的url和二维码的图片url,后台返回的二维码路径一般是base64格式,wx.getImageInfo无法拿到base64的图片信息,所以先要把base64的图片做下转化

base64src(base64data, cb) {
		const fsm = wx.getFileSystemManager();
		const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
		const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
		if (!format) {
			return (new Error('ERROR_BASE64SRC_PARSE'));
		}
		const time = new Date().getTime(); //自定义文件名
		const filePath = `${wx.env.USER_DATA_PATH}/${time}.${format}`;
		const buffer = wx.base64ToArrayBuffer(bodyData);
		fsm.writeFile({
			filePath,
			data: buffer,
			encoding: 'binary',
			success() {
				cb(filePath);
			},
			fail() {
				return (new Error('ERROR_BASE64SRC_WRITE'));
			},
		});
	}

2.获取图片信息

wx.getSystemInfo({
        success(res) {
          let rpx = res.windowWidth / 375;
          self.createImage(rpx);
        }
      })
getImage(url) {//获取图片信息
      return new Promise((resolve, reject) => {
        wx.getImageInfo({
          src: url,
          success: (res) => {
            resolve(res)
          },
          fail: () => {
            reject("")
          }
        })
      })
    }
    getImageAll(image_src) {
      let that = this;
      var all = [];
      image_src.map((item) => {
        all.push(that.getImage(item))
      })
      return Promise.all(all)
    }
    
 //创建
    createImage(rpx) {
      let that = this;
      //图片一把是通过接口请求后台,返回俩点地址,或者网络图片
      //图片区别下载完成,生成临时路径后,在尽心绘制
      this.getImageAll([this.bgUrl, this.codeUrl]).then((res) => {//bgUrl背景图片codeUrl 转化后的二维码url
        let bg = res[0];
        let qr = res[1];
        let bgW = bg.width;
        let bgH = bg.height;
        //设置canvas width height position-left,  为图片宽高
        let ctx = wx.createCanvasContext('canvas');
        ctx.drawImage(bg.path, (this.canvasWidth - 260) / 2 * rpx, 30 * rpx, 260 * rpx, 270 * rpx);
        ctx.drawImage(qr.path, Math.floor((this.canvasWidth - qr.width * 0.35) / 2), 400 * rpx, Math.floor(qr.width * 0.35), Math.floor(qr.width * 0.35))
        ctx.setFontSize(16 * rpx);
        ctx.setFillStyle('#333');
        ctx.setTextAlign('center');
        ctx.fillText(that.distribution.ItemName, (this.canvasWidth / 2) * rpx, 340 * rpx, 100 * rpx, 100 * rpx);
        ctx.setFontSize(22 * rpx);
        ctx.setFillStyle('#EE843F');
        ctx.setTextAlign('center');
        ctx.fillText('海报标题', (this.canvasWidth / 2) * rpx, 376 * rpx, 100 * rpx, 100 * rpx);
        ctx.draw(true);
        that.isShow = true;
        that.closeLoading();
        that.$apply();
      })
    }
    //保存
    saveImage() {
      wx.canvasToTempFilePath({ //canvas 生成图片 生成临时路径
        canvasId: 'canvas',
        success: function(res) {
          wx.saveImageToPhotosAlbum({ //下载图片
            filePath: res.tempFilePath,
            success: function() {
              wx.showToast({
                title: "保存成功",
                icon: "success",
              })
            }
          })
        }
      })
    }

备注:1.一定要处理base64路径;2.注意ctx.fillText参数的含义(还踩了很多坑,想起来就补充)