HarmonyOS 鸿蒙Next中OffscreenCanvas修改图片添加水印

HarmonyOS 鸿蒙Next中OffscreenCanvas修改图片添加水印 目前使用imageknife来加载第三方网络图片，该库支持配置图形变换Transformation，我编写了一个自定义的添加水印的Transformation，参考了帖子 https://developer.huawei.com/consumer/cn/forum/topic/0207151268119912225?fid=0109140870620153026 的方法使用OffscreenCanvas给图片添加水印，单个图片时还好，如果批量加载图片时会发现卡顿。经过我的测试发现，通过OffscreenCanvas处理后，调用offScreenContext.getPixelMap获取到的PixelMap尺寸和大小有变化，导致批量图片加载页面卡。请问有什么其它代替的图片添加水印解决方案（需要修改原图方式，因为后续还有保存图片和分享图片功能都是用到带水印的图片）？


更多关于HarmonyOS 鸿蒙Next中OffscreenCanvas修改图片添加水印的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
imageSource.getImageInfo 此函数回调，ImageInfo ，size是像素。

1. imagePacker.packing并不会改变图片尺寸大小，图片尺寸变大发生在OffscreenCanvas阶段。
2. OffscreenCanvas默认单位是vp，而pixmap宽高是px，这是图片尺寸变大的原因。

修改代码 const offScreenCanvas = new OffscreenCanvas(px2vp(data.size.width), px2vp(data.size.height))

图片添加水印可以参考下文档：[https://gitee.com/harmonyos_samples/watermark](https://gitee.com/harmonyos_samples/watermark)

OffscreenCanvas支持并发线程绘制，参考链接：[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-offscreencanvas-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-offscreencanvas-V5)

更多关于HarmonyOS 鸿蒙Next中OffscreenCanvas修改图片添加水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，OffscreenCanvas 是一个离屏画布，允许在不直接渲染到屏幕的情况下进行绘图操作。要在 OffscreenCanvas 上修改图片并添加水印，可以按照以下步骤进行：

  1. 创建 OffscreenCanvas 实例：首先，创建一个 OffscreenCanvas 对象，并指定其宽度和高度，通常与原始图片的尺寸一致。

  2. 加载图片：使用 Image 对象加载原始图片，并等待其加载完成。

  3. 绘制图片到 OffscreenCanvas：将加载的图片绘制到 OffscreenCanvas 上。

  4. 添加水印：在 OffscreenCanvas 上绘制水印文本或图像。可以使用 fillText 方法绘制文本水印，或者使用 drawImage 方法绘制图像水印。

  5. 获取修改后的图片：通过 OffscreenCanvas 的 transferToImageBitmap 方法获取修改后的图片数据。

以下是示例代码：

// 创建 OffscreenCanvas
const offscreenCanvas = new OffscreenCanvas(imageWidth, imageHeight);
const ctx = offscreenCanvas.getContext('2d');

// 加载图片
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = () => {
    // 绘制图片到 OffscreenCanvas
    ctx.drawImage(img, 0, 0, imageWidth, imageHeight);

    // 添加水印文本
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillText('Watermark', 10, 30);

    // 获取修改后的图片
    const modifiedImage = offscreenCanvas.transferToImageBitmap();
};

该方法适用于需要在后台处理图片并添加水印的场景，且不会影响主线程的性能。

在HarmonyOS的鸿蒙Next中，使用OffscreenCanvas为图片添加水印的步骤如下：

  1. 创建OffscreenCanvas：使用new OffscreenCanvas(width, height)创建一个离屏画布，指定宽度和高度。

  2. 获取2D渲染上下文：通过offscreenCanvas.getContext('2d')获取2D渲染上下文。

  3. 绘制图片：使用drawImage(image, x, y)将原始图片绘制到画布上。

  4. 添加水印：使用fillText(text, x, y)在画布上绘制水印文本，可自定义字体、颜色等样式。

  5. 获取处理后的图片：使用offscreenCanvas.transferToImageBitmap()或offscreenCanvas.toDataURL()获取添加水印后的图片数据。

通过以上步骤，可以在鸿蒙Next中利用OffscreenCanvas高效地为图片添加水印。

回到顶部