小程序给图片添加水印（时间，经纬度信息）

在移动互联网时代，小程序因其轻量、便捷的特性，逐渐成为用户日常生活中不可或缺的工具。无论是社交、购物，还是记录生活，小程序都提供了丰富的功能。然而，随着用户对数据安全和信息追溯需求的增加，如何在图片中添加关键信息（如时间、经纬度等）成为开发者需要解决的问题之一。尤其是在一些特定场景下，如户外打卡、旅行记录、证据留存等，为图片添加时间戳和地理位置信息不仅能增强数据的可信度，还能为用户提供更丰富的上下文信息。

本文将详细介绍如何在小程序中实现为图片添加时间、经纬度信息的水印功能。我们将从获取用户地理位置、格式化时间信息，到将水印动态添加到图片中，一步步讲解实现过程。无论你是小程序开发新手，还是有一定经验的开发者，都能通过本文掌握这一实用技能，为你的小程序增添更多实用价值。让我们一起探索如何通过技术手段，让每一张图片都“有迹可循”。

实现思路如下：
1、使用小程序的canvas来绘制图片，画布的大小根据图片的实际宽高设置
2、在画布中左下角位置一个黑色半透明的矩形
3、在矩形上绘制文本，文本内容为时间和经纬度
4、使用 wx.canvasToTempFilePath 方法将canvas内容导出成图片缓存到小程序本地存储
5、使用 wx.compressImage 压缩图片，这一步很重要，因为通过canvas直接导出的图片非常大，所以要根据情况压缩图片

import moment from '../../utils/moment';
export const addWatermark = (pageIns, imgpath, position) => {
  const time = moment().format('YYYY-MM-DD HH:mm:ss');
  return new Promise((resolve, reject) => {
    const dataSrc = imgpath;
    const query = pageIns.createSelectorQuery();
    console.log('query canvas result', query);
    query.select('#watermark-canvas')
    .fields({ node: true, size: true })
    .exec(async (res) => {
      console.log('query canvas result', res);
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      // 加载图片
      const img = canvas.createImage();
      img.src = dataSrc; // 替换为你的图片地址
      img.onload = () => {
        // 获取原图的宽高
        const imgWidth = img.width;
        const imgHeight = img.height;

        console.log('待压缩图片宽高', imgWidth, imgHeight);
  
        // 设置 Canvas 的实际宽高为原图的宽高
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = imgWidth * dpr;
        canvas.height = imgHeight * dpr;
        ctx.scale(dpr, dpr);
  
        // 绘制图片
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
  
        // 绘制黑色半透明矩形块
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        // ctx.fillRect(0, imgHeight - 60, imgWidth, 60); // 矩形块位于图片底部
        ctx.fillRect(0, imgHeight - 60, 210, 60);
  
        // 绘制水印文本
        ctx.font = '16px sans-serif';
        ctx.fillStyle = '#ffffff';
        ctx.fillText(time, 20, imgHeight - 35); // 文本位于矩形块内
        ctx.fillText(position.latitude + '--' + position.longitude, 20, imgHeight - 14); // 文本位于矩形块内

        // 生成临时文件路径
        wx.canvasToTempFilePath({
          canvas,
          fileType: 'jpg',
          destWidth: imgWidth,
          destHeight: imgHeight,
          quality: 0.5,
          success: (res) => {
            const tempFilePath = res.tempFilePath;
            wx.compressImage({
              src: tempFilePath, // 图片路径
              quality:60, // 压缩质量
              success({tempFilePath: tempPathAfterCompress}) {
                console.log("压缩成功", tempPathAfterCompress)
                wx.getFileInfo({
                  filePath: tempPathAfterCompress,
                  success(resInfo) {
                    console.log('添加水印后文件大小（KB）:', (resInfo.size / 1024).toFixed(2)); // 输出文件大小（KB），保留两位小数
                    console.log('添加水印后文件大小（MB）:', (resInfo.size / (1024 * 1024)).toFixed(2)); // 输出文件大小（MB），保留两位小数
                  },
                  fail(err) {
                    console.error('图片添加水印->获取文件信息失败', err);
                  }
                });
                resolve(tempPathAfterCompress);
              }
            })
          },
          fail: (error) => {
            console.info('给图片加水印，导出canvas处理后的图片错误', error)
          }
        });
      };
    });
  });
}

export const batchAddWatermark = (pageIns, paths, position) => {
  console.log('batchAddWatermark', paths);

  const promises = paths?.map(p => {
    return addWatermark(pageIns, p, position);
  });
  console.log('promises of add watermark', promises);
  return Promise.all(promises)
}

小程序给图片添加水印（时间，经纬度信息）

评论 (0)