保存的二维码图片上添加二维码名称

二维码创建 保存 上传

因为需要保存二维码时，在图片上附加带上二维码名称，

所以用到了canvas绘图工具，

设置一个画布，将二维码和名字绘制在画布上 

const ctx = uni.createCanvasContext('myCanvas', this);
ctx.fillStyle = '#FFFFFF'; // 设置背景色为白色
ctx.fillRect(0, 0, 300, 300); // 填充背景色

const text = that.Qrname;
const maxWidth = 100; // 最大宽度为100px

ctx.font = '16px Arial'; // 设置字体样式
ctx.fillStyle = '#000000'; // 设置字体颜色为黑色

// 计算文字宽度
const textWidth = ctx.measureText(text).width;

let drawText = text;
if (textWidth > maxWidth) {
  // 超出最大宽度时，显示省略号
  while (ctx.measureText(drawText + '...').width > maxWidth) {
    drawText = drawText.substring(0, drawText.length - 1);
  }
  drawText += '...';
}

// 计算文字绘制起始坐标
const textX = (150 - ctx.measureText(drawText).width) / 2;
const textY = 15;

ctx.fillText(drawText, textX, textY); // 绘制文本
this.qrsrc().then(src => {
  console.log(src, 'qrSrc'); // 输出图片路径
  uni.getImageInfo({
    src: src,
    success(res) {
      console.log(res, 'getImageInfosuccess');
      ctx.drawImage(res.path, 15, 20, 120, 120); // 绘制图片
      ctx.draw(false, (e) => {
        if (e) {
          console.log(e,'图片成功绘制到画布上了');
          that.canvasToBlob();
        } else {
          console.log('绘制图片到画布上发生错误', e);
        }
      });
    }
  });
}).catch(error => {
  console.log(error); // 输出错误信息
});

但是二维码组件返回的地址又是base64格式，所以需要转换格式为TempFilePath临时文件路径

async qrsrc() {
				try {
					const tempFilePath = await new Promise((resolve, reject) => {
						this.$refs.uqrcode.toTempFilePath({
							success: async res => {
								try {
									console.log(res.tempFilePath, '二维码图片，base64');
									const filePath = await this.base64ToTempFilePath(res
										.tempFilePath);
									resolve(filePath);
								} catch (error) {
									reject(error);
								}
							},
							fail: res => {
								reject(res);
							}
						});
					});
					console.log(tempFilePath, 'tempFilePath');
					return tempFilePath;
				} catch (error) {
					console.log(error);
					throw error;
				}
			},

这个方法返回一个临时文件路径http://usr/temp_1710915885909.png

拿到路径后，还需要去读取图片的信息

uni.getImageInfo({
						src: src,
						success(res) {
							console.log(res, 'getImageInfosuccess');
							ctx.drawImage(res.path, 15, 20, 120, 120); // 绘制图片
							ctx.draw(false, (e) => {
								if (e) {
									console.log(e,'图片成功绘制到画布上了');
									that.canvasToBlob();
								} else {
									console.log('绘制图片到画布上发生错误', e);
								}
							});
						}
					});

读取到后再去绘制图片到画布上ctx.drawImage

绘制成功之后还没有完，还需要将整个画布输出为图片，并且上传服务器

async canvasToBlob() {
				 const that = this;
				  uni.canvasToTempFilePath({
				    canvasId: 'myCanvas',
				    success(res) {
				      uni.getFileSystemManager().readFile({
				        filePath: res.tempFilePath,
				        encoding: 'base64',
				        success(data) {
				          const base64Data = data.data;
				          console.log(base64Data);
				          // 在这里将 base64Data 发送到服务器或者进行其他操作
						  const fileName = 'test.jpg'; // 指定文件名
						          const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`; // 拼接文件路径
						          uni.getFileSystemManager().writeFile({
						            filePath,
						            data: base64Data,
						            encoding: 'base64',
						            success(e) {
						              console.log('写入文件成功', filePath,e);
						  
						              // 上传文件
						              uni.uploadFile({
						                url: 'http://192.168.1.48:30081/api/v1/wx/operator/upload', // 替换成你的上传接口地址
						                filePath, // 传入本地文件路径
						                name: 'file', // 服务器接收的文件字段名
						                success(uploadFileRes) {
						                  let data = JSON.parse(uploadFileRes.data)
										  console.log(data,'uploadFileRes');
										  that.shareQRurl = data.data.fileUrl
										  that.QRshow = true
										  let effectiveStatus = 1; // 0-待生效;1-生效中;2-已失效
										  if (new Date(that.startTime) > new Date()) {
										      effectiveStatus = 0;
										  } else if (new Date(that.$u.timeFormat(that.endTime,'yyyy-mm-dd') + ' 24:00:00') < new Date()) {
										      effectiveStatus = 2;
										  }
										  console.log(effectiveStatus,'effectiveStatus');
										  that.$request.page.editQRcode({
											  id:that.QrId,
											  qrcodeUrl:that.shareQRurl,
											  courseIdList:that.courseList.map(item=>item.id),
											  examinationIdList:that.examList.map(item=>item.id),
											  qrcodeName:that.Qrname,
											  startTime:that.$u.timeFormat(that.startTime,'yyyy-mm-dd'),
											  expiredTime:that.$u.timeFormat(that.endTime,'yyyy-mm-dd'),
											  qrcodeStatus:effectiveStatus
										  }).then(res=>{
											  console.log(res);
											  that.$u.toast('修改保存成功')
										  })
						                },
						                fail(err) {
						                  console.error('上传失败', err);
						                }
						              });
						            },
						            fail(error) {
						              console.error('写入文件失败', error);
						              throw error;
						            }
						          });
				        },
				        fail(error) {
				          console.error(error);
				          throw error;
				        }
				      });
				    },
				    fail(error) {
				      console.error(error);
				      throw error;
				    }
				  });
			},

这里先用uni.canvasToTempFilePath将画布转为临时文件

然后再通过uni.getFileSystemManager().readFile读取文件，将它转换为base64格式

然后再通过uni.getFileSystemManager().writeFile写入文件，将它转换为文件格式

然后再使用uni.uploadFile上传文件到服务器

最后再使用uni.saveImageToPhotosAlbum将二维码图片保存到手机相册