小程序中如何将将图片下方加上文字并保存

我们要做的就是在一个已有的图片url上加上想要的文字然后长按保存到手机

我这里使用的是 Taro 的Vue3 大家可作为一个参考转为自己的代码

第一步先定义元素

<canvas  canvas-id="myCanvas" style="width:300px; height:330px;"></canvas>

重新绘制图片

const drawCanvas = async() => {
  const ctx = Taro.createCanvasContext('myCanvas');
  const imageSrc = '你的图片url';

    // 下载图片到本地
  const imageInfo = await Taro.downloadFile({
    url: imageSrc,
  }).catch(err => console.error('下载图片失败:', err))

  // 先填充整个画布为白色背景
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 300, 330);

  // 绘制图片，可以是二维码
  ctx.drawImage(imageInfo.tempFilePath, 0, 0, 300, 300);

  // 设置文字样式
  ctx.setFillStyle('black') // 文字颜色
  ctx.setFontSize(24) // 文字字号
  // ctx.font = 'bolder 24px sans-serif'
  ctx.font = 'bold 24px sans-serif'; 
  ctx.fillStyle = 'black'; // 文字颜色
  ctx.setTextAlign('center') // 文字居中

  ctx.strokeStyle = 'black'; // 描边颜色
  ctx.lineWidth = 1; // 设置描边宽度以达到加粗效果
  ctx.strokeText('我是文字', 150, 320); // 描边加粗


  // 绘制文字
  ctx.fillText(device.value.sn, 150, 320); // 在画布上绘制填色的文本

  // 实际地在画布上进行绘制
  ctx.draw(true);
};

长按保存画布

const onLongPress = (url) => {
    console.log('长按');
    Taro.showActionSheet({
    itemList: ['保存图片'],
  }).then(res => {
    if (res.tapIndex === 0) {
      // 用户确定保存图片
      // saveImage(url);
      saveCanvasImage()
    }
  }).catch(err => console.error(err));
  }

  const saveCanvasImage = () => {
  // 首先获得授权
  Taro.authorize({
    scope: 'scope.writePhotosAlbum',
  }).then(() => {
    // 获取画布内容
    Taro.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: function(res) {
        //保存图片到相册
        Taro.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            Taro.showToast({ title: '保存成功', icon: 'success' });
          },
          fail() {
            Taro.showToast({ title: '保存失败', icon: 'none' });
          }
        });
      }
    });
  }).catch(() => {
    Taro.showToast({ title: '需要授权保存相册', icon: 'none' });
  });
};