【鸿蒙ArkUI实战开发】基于原生的水印添加能力

最新推荐文章于 2024-10-07 15:50:48 发布
最新推荐文章于 2024-10-07 15:50:48 发布
阅读量1.1k 收藏 19
点赞数 23
分类专栏： 移动开发 鸿蒙开发 HarmonyOS 文章标签： harmonyos c++ 前端 鸿蒙 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOSMN/article/details/140252232
版权
移动开发 同时被 3 个专栏收录
101 篇文章 0 订阅
订阅专栏
鸿蒙开发
101 篇文章 2 订阅
订阅专栏
HarmonyOS
101 篇文章 0 订阅
订阅专栏

场景描述

添加水印是一个比较常见的功能，下面列举一些遇到的业务需求：

  • 场景一：在页面背景上添加全局水印

  • 场景二：保存图片添加水印

  • 场景三：拍照添加水印

  • 场景四：window级别的全局水印

方案描述

场景一：

在页面背景上添加全局水印

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

方案

页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印，在使用Stack组件叠加在page跟容器上

方式一：使用canvas进行绘制

Stack({ alignContent: Alignment.Center }) {

Column() {

Text("没有数据哦").fontColor("#495057")

Image($r("app.media.empty")).width(300)

}

Canvas(this.context)

.width("100%")

.height("100%")

.hitTestBehavior(HitTestMode.Transparent)

.onReady(() => {

this.context.fillStyle = '#10000000'

this.context.font = "16vp"

this.context.textAlign = "center"

this.context.textBaseline = "middle"

// 在这里绘制文字水印，也可以是图片水印

for (let i = 0; i < this.context.width / 120; i++) {

this.context.translate(120, 0)

let j = 0

for (; j < this.context.height / 120; j++) {

this.context.rotate(-Math.PI / 180 * 30)

// 此处水印数据是写死的，具体请替换为自己的水印

this.context.fillText("水印水印水印", -60, -60)

this.context.rotate(Math.PI / 180 * 30)

this.context.translate(0, 120)

}

this.context.translate(0, -120 * j)

}

})

}.layoutWeight(1)

方式二：使用overlay属性绘制

方式二思路与方式一实现思路一致，该方式可以讲水印组件单独拧出来，在其他使用时使用overlay属性来使用，实现效果与方式一一致

@Builder

Watermark() {

Canvas(this.context)

.width("100%")

.height("100%")

.hitTestBehavior(HitTestMode.Transparent)

.onReady(() => {

this.context.fillStyle = '#10000000'

this.context.font = "16vp"

this.context.textAlign = "center"

this.context.textBaseline = "middle"

// 在这里绘制文字水印，也可以是图片水印

for (let i = 0; i < this.context.width / 120; i++) {

this.context.translate(120, 0)

let j = 0

for (; j < this.context.height / 120; j++) {

this.context.rotate(-Math.PI / 180 * 30)

// 此处水印数据是写死的，具体请替换为自己的水印

this.context.fillText("水印水印水印", -60, -60)

this.context.rotate(Math.PI / 180 * 30)

this.context.translate(0, 120)

}

this.context.translate(0, -120 * j)

}

})

}

Column() {

Text("没有数据哦").fontColor("#495057")

Image($r("app.media.empty")).width(300)

}

.layoutWeight(1)

.overlay(this.Watermark())

.width("100%")

场景二：

保存图片添加水印

方案

使用OffScreenCanvas离屏画布拿到图片源数据，在离屏画布上使用OffscreenCanvasRenderingContext2D.drawImage方法讲图片数据进行绘制，使用OffscreenCanvasRenderingContext2D.fillText方法绘制文字水印，通过 OffscreenCanvasRenderingContext2D.getPixelMap方法获取添加水印后的图片pixelMap数据，再通过安全控件方式拿到图库的uri路径，在这个uri下通过image.createImagePacker方法创建图片文件，通过fs.write方法写入这个图库的文件中，具体实现代码如下所示

核心代码

第一步：使用resourceManager.getMediaContent方法获取当前的图片资源

getContext(this).resourceManager.getMediaContent($r(this.imagePath)).then((data) => {

// ...

}).catch((err: BusinessError) => {

console.log("getPixelMap error" + err.message)

})

第二步：使用image.createImageSource方法创建图片资源，在使用OffscreenCanvasRenderingContext2D.drawImage方法绘制图片在离屏画布上

let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)

let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);

imageSource.getImageInfo((err, value) => {

if (err) {

return;

}

let opts: image.DecodingOptions = {

editable: true,

desiredSize: {

height: value.size.height,

width: value.size.width

}

};

imageSource.createPixelMap(opts, async (err, pixelMap) => {

// 这个回调的pixelMap就是当前图片的pixelMap

let offScreenCanvas = new OffscreenCanvas(value.size.width, value.size.height)

let OffScreenContext = offScreenCanvas.getContext("2d")

this.imageScale = offScreenCanvas.width / display.getDefaultDisplaySync().width

OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)

// ...

})

})

第三步：使用OffscreenCanvasRenderingContext2D.fillText绘制水印

getContext(this).resourceManager.getMediaContent($r(this.imagePath)).then((data)

let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)

let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);

imageSource.getImageInfo((err, value) => {

if (err) {

return;

}

let opts: image.DecodingOptions = {

editable: true,

desiredSize: {

height: value.size.height,

width: value.size.width

}

};

imageSource.createPixelMap(opts, async (err, pixelMap) => {

// ...

OffScreenContext.textAlign = "right"

OffScreenContext.textBaseline = "bottom"

OffScreenContext.fillStyle = '#30000000'

OffScreenContext.font = 32 * this.imageScale + "vp"

OffScreenContext.fillText("初九会画画", offScreenCanvas.width - 20 * this.imageScale, offScreenCanvas.height - 20 * this.imageScale)

// ...

})

})

}).catch((err: BusinessError) => {

console.log("getPixelMap error" + err.message)

})

第四步：使用OffscreenCanvasRenderingContext2D.getPixelMap取出绘制后的图片数据

// 获取新的PixelMap

this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)

第五步：使用SaveButton保存到图库中

SaveButton({ icon: SaveIconStyle.FULL_FILLED }).onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {

if (result == SaveButtonOnClickResult.SUCCESS) {

try {

let context = getContext(this);

let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 创建媒体文件

this.imagePath = "app.media.img1"

this.addWatermark()

if (this.pixelMap) {

saveToFile(this.pixelMap, uri)

}

} catch (err) {

console.error('createAsset failed, message = ', err);

}

} else {

console.error('SaveButtonOnClickResult createAsset failed');

}

})

场景三：

拍照添加水印

方案

使用cameraPicker拉起系统相机拍照，拿到返回的picker.PickerResult.resultUri后使用fs.openSync读出图片文件转化为pixelMap，使用image组件渲染在页面上，在保存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后保存

核心代码

第一步：使用cameraPicker拉起系统相机

import picker from '@ohos.multimedia.cameraPicker';

import camera from '@ohos.multimedia.camera';

async openCamera() {

try {

let pickerProfile: picker.PickerProfile = {

cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK

};

let pickerResult: picker.PickerResult = await picker.pick(getContext(this),

[picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO], pickerProfile);

console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));

// ...

} catch (error) {

let err = error as BusinessError;

console.error(`the pick call failed. error code: ${err.message}`);

}

}

第二步：将相机拍摄的照片渲染在页面中，使用fs.readSync读出文件字节流，再使用image.createImageSource创建图片资源管理器获取到图片的pixelMap

@State pixelMap: image.PixelMap | null = null

async openCamera() {

try {

// ...

if (pickerResult.resultUri) {

this.showImage = true

}

let file = fs.openSync(pickerResult.resultUri)

let buffer = new ArrayBuffer(fs.statSync(file.fd).size)

fs.readSync(file.fd, buffer)

let imageSource: image.ImageSource = image.createImageSource(buffer)

imageSource.getImageInfo((err, value) => {

if (err) {

return;

}

let opts: image.DecodingOptions = {

editable: true,

desiredSize: {

height: value.size.height,

width: value.size.width

}

};

imageSource.createPixelMap(opts, async (err, pixelMap) => {

this.pixelMap = pixelMap

})

})

} catch (error) {

let err = error as BusinessError;

console.error(`the pick call failed. error code: ${err.message}`);

}

}

build() {

// ...

if(this.showImage) {

Image(this.pixelMap).width("100%")

// ...

}

}

第三步：使用drawing.TextBlob.makeFromString绘制水印后 使用SaveButton保存在系统相册中

addWaterMask(pixelMap: image.PixelMap) {

this.imageScale = this.imageWidth / display.getDefaultDisplaySync().width

const canvas = new drawing.Canvas(pixelMap)

const pen = new drawing.Pen()

pen.setColor({ alpha: 255, red: 0, green: 10, blue: 10 })

const font = new drawing.Font()

font.setSize(32 * this.imageScale)

let textWidth = font.measureText("初九会画画", drawing.TextEncoding.TEXT_ENCODING_UTF8)

const brush = new drawing.Brush()

brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 })

const textBlob = drawing.TextBlob.makeFromString("初九会画画", font, drawing.TextEncoding.TEXT_ENCODING_UTF8)

canvas.attachBrush(brush)

canvas.attachPen(pen)

canvas.drawTextBlob(textBlob, this.imageWidth - 20 * this.imageScale - textWidth, this.imageHeight - 20 * this.imageScale)

canvas.detachBrush();

canvas.detachPen()

return pixelMap

}

SaveButton()

.onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {

if (result == SaveButtonOnClickResult.SUCCESS) {

try {

let context = getContext(this);

let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); // 创建媒体文件

saveToFile(this.addWaterMask(this.pixelMap!), uri);

} catch (err) {

console.error('createAsset failed, message = ', err);

}

} else {

console.error('SaveButtonOnClickResult createAsset failed');

}

})

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

在这里插入图片描述

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH

「已注销」
关注
专栏目录
鸿蒙ArkUI开发-Video组件的使用
m0_62167422的博客
01-23 1634
在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。
基于原生的水印添加能力
hongxiaomeng的博客
06-04 437
HarmonyOS NEXT 水印案例
shudaoshanQAQ的博客
05-15 1125
本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。
HarmonyOS鸿蒙开发：基于原生的全局水印添加场景
2401_84917132的博客
08-30 1380
页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印，在使用Stack组件叠加在page跟容器上
HarmonyOS实战开发-如何通过Canvas组件以及OffscreenCanvas实现页面添加水印以及保存图片时添加水印的功能。
m0_70749039的博客
05-17 849
在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。
鸿蒙5.0开发进阶：实现水印案例实操
最新发布
HSMMQAQ的博客
10-07 903
本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。
基于HarmonyOS ArkUI和napi的MQTT客户端实现
11-09
本资源提供了基于 HarmonyOS 的 ArkUI 和 napi 实现的 MQTT 客户端源码，帮助开发者更便捷地在 HarmonyOS 设备上构建 MQTT 相关功能。 首先，让我们深入了解 ArkUI 和 napi： 1. **ArkUI**：HarmonyOS 的应用框架...
使用Taro开发鸿蒙原生应用.zip
12-16
在当前的数字化时代，华为推出的鸿蒙操作系统（HarmonyOS）为开发者提供了一个全新的平台，以构建跨设备、无缝协同的应用。Taro 是一个开源的前端框架，它允许开发者使用同一份代码库来构建多端应用，包括微信小程序...
基于鸿蒙api开发的仿微信的demo，帮助自己强制学习.zip
02-07
鸿蒙操作系统（HarmonyOS）是由华为公司开发的一款面向全场景的分布式操作系统，旨在提供跨设备、无缝协同的用户体验。基于鸿蒙API进行应用开发，可以充分利用其分布式能力，实现设备间的高效联动。在这个名为...
基于鸿蒙系统开发的记事本.zip
02-07
华为推出的鸿蒙系统（HarmonyOS），是中国首个面向全场景的分布式操作系统，旨在打破设备间的壁垒，实现跨平台无缝协同体验。这个压缩包“基于鸿蒙系统开发的记事本.zip”提供了一个在鸿蒙系统上开发记事本应用的...
Winform 全屏水印
04-08
Winfom实现的全屏水印，水印在最前面，通过设置透明度，可以起到调节亮度的作用
windows去桌面水印
08-24
windows去除桌面水印 鼠标右键以管理身份运行即可 试验可用
【HarmonyOS NEXT】是否支持图片添加水印
Mayism123的博客
07-15 318
在原有安卓场景中，通过两张bitmap合成，可以实现对拍摄的照片添加含有指定信息的水印，鸿蒙系统是否也有类似的能力或者开源库实现该功能。提供了PixelMap对图像进行操作，将指定的矩形区域像素数据读取出来，进行修改后，再写回原图片对应区域。添加水印 / PixelMap / 位图操作。
【解决方案】HarmonyOS图片添加水印
xp1870069025的博客
08-18 349
实现思路：从相册中算选择图片，将图片展示到UI界面，利用核心方法drawImage将要添加的水印画到图片上，然后将图片保存。1、从相册中选取图片，添加水印，并返回添加水印后的图片保存路径。2、addWaterImage方法类型的封装。
OpenHarmony实例：【资源管理器】
m0_62167422的博客
04-09 1133
本工程使用[@ohos.app.ability.common] 接口中的AbilityContext类，获取资源管理器resourceManager，使用[@ohos.resourceManager.d.ts]中的接口，展示了格式化字符串查询、基于指定屏幕分辨率查询媒体资源、获取系统资源管理对象等基础功能，以及展示了资源静态overlay以及运行时overlay的特性功能。而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由。
网站页面水印效果的实现（上）：页面水印的添加
java web
09-07 2532
在web项目中，经常能够看到类似于全站页面都被添加了水印的效果。我将分两期，给大家介绍一下，一个简单的水印组件的构建过程，分别是水印信息的添加和防篡改。这一期，先来介绍水印信息的添加，也就是如何创建一个水印组件，能够像ant design框架的watermark组件一样，可以灵活方便的应用到指定区域。
整个网页添加水印
zhourongxiang1的博客
03-26 179
在要添加水印的网页中增加以下代码。编写waterMark.js。
HarmonyOS应用开发-UI组件性能优化实例详解
HarmonyOS_002的博客
07-05 1146
图2 自定义组件生命周期流程图如上图所示，自定义组件创建完成之后，在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。因此，应尽量避免在自定义组件的生命周期内执行高耗时操作。对于复杂计算的耗时场景，可以将计算结果进行缓存处理。对于不需要等待结果的高耗时任务，可以采用多线程处理该任务，通过并发的方式避免主线程阻塞。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值