HarmonyOS 鸿蒙Next 预览水印保存图片

介绍

利用ArkTS声明式开发范式实现了一个预览水印保存图片的功能，其中有文字图片水印并且可移动。

demo详情链接

https://gitee.com/scenario-samples/move-watermark

phonegap100 1楼•6 天前

更多关于HarmonyOS 鸿蒙Next 预览水印保存图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

针对您提出的“HarmonyOS 鸿蒙Next 预览水印保存图片（ArkTS）鸿蒙场景化代码”问题，以下是一个简要的代码示例，用于在ArkTS中实现预览图片并添加水印后保存：

@Entry
@Component
struct WatermarkImageDemo {
    @State private imagePath: string = "";
    @State private watermarkedImagePath: string = "";

    build() {
        Column() {
            Image($this.imagePath)
                .width('100%')
                .height('300px')
                .onClick(() => {
                    this.addWatermarkAndSave();
                });
        }
    }

    private async addWatermarkAndSave() {
        // 加载图片
        let originalImage = await fetchImage(this.imagePath);
        
        // 添加水印逻辑（假设水印内容为"Sample Watermark"）
        let canvas = new OffscreenCanvas(originalImage.width, originalImage.height);
        let ctx = canvas.getContext('2d');
        ctx.drawImage(originalImage, 0, 0);
        ctx.font = "20px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
        ctx.fillText("Sample Watermark", 10, 30);

        // 保存图片
        this.watermarkedImagePath = canvas.toTempFilePathSync('watermark');
    }
}

上述代码实现了基本的图片预览、添加水印及保存功能。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html