为图片轻松添加自定义水印-用uni-app让图片水印制作更方便

2023-11-25 04:24:18

为图片添加自定义水印，用uni-app让图片水印制作更方便

在日常工作和生活中，我们常常需要在图片上添加水印，以表明图片的版权归属或其他用途。传统的水印制作方法需要借助专业的图片处理软件，不仅步骤繁琐，而且门槛较高。

而现在，借助uni-app强大的开发能力，我们可以轻松地为图片添加自定义水印。uni-app提供了一个名为“canvas”的组件，它可以帮助我们轻松地实现图片水印的制作。

步骤一：引入uni-app的canvas组件

在uni-app的项目中，首先需要引入canvas组件。在页面的json文件中，添加如下代码：

{
  "usingComponents": {
    "canvas": "/path/to/canvas"
  }
}

步骤二：在页面中添加canvas组件

在页面的wxml文件中，添加如下代码：

<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>

步骤三：获取图片并绘制水印

在页面的js文件中，首先需要获取需要添加水印的图片。可以使用uni.chooseImage()方法从相册中选择图片，或者使用uni.canvasToTempFilePath()方法将canvas组件中的图片保存到临时文件。

uni.chooseImage({
  success: (res) => {
    const filePath = res.tempFilePaths[0];
    drawImage(filePath);
  }
});

接下来，就可以使用canvas组件的drawImage()方法将图片绘制到canvas中。

function drawImage(filePath) {
  const ctx = uni.createCanvasContext('canvas');
  ctx.drawImage(filePath, 0, 0, 100, 100);
}

最后，可以使用uni.canvasToTempFilePath()方法将canvas组件中的图片保存到临时文件。

uni.canvasToTempFilePath({
  canvasId: 'canvas',
  success: (res) => {
    const filePath = res.tempFilePath;
    // 可以将filePath保存到服务器或其他地方
  }
});

步骤四：解决生成图片不全问题

在某些情况下，生成的图片可能会不完整。这是因为canvas组件的默认导出尺寸是300px * 300px。如果图片的尺寸大于300px * 300px，那么生成的图片就会不完整。

为了解决这个问题，我们可以手动设置canvas组件的导出尺寸。在页面的js文件中，添加如下代码：

uni.createSelectorQuery().select('#canvas').fields({
  size: true
}).exec((res) => {
  const width = res[0].width;
  const height = res[0].height;
  uni.canvasToTempFilePath({
    canvasId: 'canvas',
    width,
    height,
    success: (res) => {
      const filePath = res.tempFilePath;
      // 可以将filePath保存到服务器或其他地方
    }
  });
});