如何在保存图片时，给图片添加水印？ HarmonyOS 鸿蒙Next

如何在保存图片时，给图片添加水印？ HarmonyOS 鸿蒙Next 使用OffScreenCanvas离屏画布拿到图片源数据，在离屏画布上使用OffscreenCanvasRenderingContext2D的drawImage和fillText分别绘制图像和文水印文字。水印图片的保存可以使用安全控件SaveButton结合fs.write来实现。

具体实现可以参考Sample《水印案例》。


更多关于如何在保存图片时，给图片添加水印？ HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于如何在保存图片时，给图片添加水印？ HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过使用Image和Canvas组件来实现给图片添加水印的功能。首先，使用Image组件加载原始图片，然后通过Canvas组件在图片上绘制水印文本或图像。具体步骤如下：

  1. 加载原始图片：使用Image组件的src属性加载需要添加水印的图片。
  2. 创建Canvas：在Image组件上叠加一个Canvas组件，设置其大小与图片一致。
  3. 绘制水印：在Canvas组件中使用drawText或drawImage方法绘制水印文本或图像。
  4. 保存图片：使用Canvas组件的toDataURL方法将带有水印的图片保存为新的图片文件。

代码示例：

// 加载图片
let img = new Image();
img.src = 'original.jpg';

// 创建Canvas
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');

// 绘制图片
ctx.drawImage(img, 0, 0);

// 绘制水印
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillText('Watermark', 10, 30);

// 保存图片
let watermarkedImage = canvas.toDataURL('image/jpeg');
回到顶部