HarmonyOS鸿蒙开发：基于原生的全局水印添加场景

最新推荐文章于 2024-10-12 17:56:59 发布
最新推荐文章于 2024-10-12 17:56:59 发布
阅读量1.3k 收藏 28
点赞数 17
分类专栏： 鸿蒙 OpenHarmony HarmonyOS 文章标签： harmonyos 华为 前端 linux 鸿蒙 html 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141719367
版权
鸿蒙 同时被 3 个专栏收录
159 篇文章 0 订阅
订阅专栏
OpenHarmony
159 篇文章 0 订阅
订阅专栏
HarmonyOS
159 篇文章 0 订阅
订阅专栏

场景描述

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

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

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

  • 场景三：拍照添加水印

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

方案描述

场景一：

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

效果图：

cke_42293.png

方案

页面全局水印的实现思路是使用透明背景的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）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

太空人_喜之郎
关注
专栏目录
HarmonyOS NEXT 水印案例
shudaoshanQAQ的博客
05-15 1092
本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。
基于原生的水印添加能力
hongxiaomeng的博客
06-04 430
【解决方案】HarmonyOS图片添加水印
xp1870069025的博客
08-18 328
实现思路：从相册中算选择图片，将图片展示到UI界面，利用核心方法drawImage将要添加的水印画到图片上，然后将图片保存。1、从相册中选取图片，添加水印，并返回添加水印后的图片保存路径。2、addWaterImage方法类型的封装。
【HarmonyOS NEXT应用开发】案例53：基于原生的水印添加能力
xzs51job的专栏
08-17 263
使用cameraPicker拉起系统相机拍照，拿到返回的picker.PickerResult.resultUri后使用fs.openSync读出图片文件转化为pixelMap，使用image组件渲染在页面上，在保存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后保存。第二步：使用image.createImageSource方法创建图片资源，在使用OffscreenCanvasRenderingContext2D.drawImage方法绘制图片在离屏画布上。
鸿蒙(HarmonyOS)实战开发篇——基于原生的水印添加能力
lc748258的博客
10-06 1160
使用cameraPicker拉起系统相机拍照，拿到返回的picker.PickerResult.resultUri后使用fs.openSync读出图片文件转化为pixelMap，使用image组件渲染在页面上，在保存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后保存。第二步：使用image.createImageSource方法创建图片资源，在使用OffscreenCanvasRenderingContext2D.drawImage方法绘制图片在离屏画布上。
【鸿蒙ArkUI实战开发】基于原生的水印添加能力
HarmonyOSMN的博客
07-07 1127
添加水印是一个比较常见的功能，下面列举一些遇到的业务需求：场景一：在页面背景上添加全局水印场景二：保存图片添加水印场景三：拍照添加水印场景四：window级别的全局水印在页面背景上添加全局水印页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印，在使用Stack组件叠加在page跟容器上方式二思路与方式一实现思路一致，该方式可以讲水印组件单独拧出来，在其他使用时使用overlay属性来使用，实现效果与方式一一致保存图片添加水印。
鸿蒙开发5.0【基于原生的水印添加能力】
2301_76813281的博客
08-22 763
添加水印是一个比较常见的功能，下面列举一些遇到的业务需求： - 场景一：在页面背景上添加全局水印 - 场景二：保存图片添加水印 - 场景三：拍照添加水印 - 场景四：window级别的全局水印
鸿蒙HarmonyOS三方库推荐
小北的博客
09-05 1506
第三方库众多，但在此我只精选了一些经典之作，希望能为大家提供帮助。不喜勿喷，整理与总结不易，还请点赞👍并收藏📂。如果您有其他推荐，欢迎留言，我会定期更新，并在推荐中署名感谢您的贡献！
【HarmonyOS Next应用开发案例】130案例应用开发1-130
xzs51job的专栏
09-02 1458
提升加载时用户体验的方法。在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
harmonyos英文怎么读-SuperHarmonyOS:基于HarmonyOS进行相关开发工作
07-01
4. **UI框架**：HarmonyOS提供了丰富的UI组件和布局，让开发者可以轻松创建美观且响应式的用户界面。 5. **Jetpack**：类似于Android的开发工具包，包含一系列库和工具，如Lifecycle（生命周期管理）、WorkManager...
HarmonyOS鸿蒙开发指南:基于ArkTS开发 数据管理 关系型数据库
sybh的博客
01-11 1737
关系型数据库（Relational Database，RDB）是一种基于关系模型来管理数据的数据库。关系型数据库基于SQLite组件提供了一套完整的对本地数据库进行管理的机制，对外提供了一系列的增、删、改、查等接口，也可以直接运行用户输入的SQL语句来满足复杂的场景需要。当应用卸载后，其相关数据库会被自动清除。关于数据库锁机制，开发者无需关注其具体实现。关系型数据库是在SQLite基础上实现的本地数据操作机制，提供给用户无需编写原生SQL语句就能进行数据增删改查的方法，同时也支持原生SQL语句操作。
HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:在模块中添加Page
sybh的博客
01-20 682
在工程目录中，选中要增加Page的Feature Ability下的pages文件夹或pages文件夹下任意文件，单击鼠标右键，选择。在支持JS、eTS语言的工程中，支持添加新的Page。Page是表示Feature Ability的一个前台页面。，输入Page name（由大小写字母、数据和下划线组成），单击。如果是Har模块，则可以在Har模块下的任意目录下进行添加。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5401
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙OS投票机制
AP11090250的博客
10-09 605
可以看到foundation进程有4个投票事件，会在相应的时机，代码中调用system::SetParam eter方法进行投票。如果有需要投票的地方没有投，会导致开机动画不会退出，开机动画退出会检测bootevent.boot.completed事件。
鸿蒙HarmonyOS中Image图片组件以及HarmonyOs图标库完全解析
yuanlaile的博客
10-09 691
鸿蒙HarmonyOS中Image图片组件以及HarmonyOs图标库完全解析
鸿蒙--商品列表
最新发布
小白小白从不日别的博客
10-12 315
"color": [},},},},..."value": "精选"},"value": "手机"},"value": "服饰"},"value": "穿搭"},"value": "家居"},"value": "【新品上市】畅乐冰晶绿低脂新品"},"value": "【新品上市】奶茶自然清新亲近自然"},"value": "重磅推荐，MD新品试用中！},"value": "6662人评价 95%好评"},},},},},
HarmonyOS NEXT应用开发实战(二、封装比UniApp和小程序更简单好用的网络库)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
10-09 1392
接上篇，HarmonyOS NEXT应用开发(一、打造最好用的网络通信模块组件)-CSDN博客​​​​​​网络库已经封装好啦，成功发布到了OpenHarmony三方库中心仓。OpenHarmony三方库中心仓但是现在还没人气，可能一些伙伴不会用。这里特写了篇文章和使用demo，发出来让大家看下，原来写网络接口竟可以如此简单。有多简单？
掌握鸿蒙系统开发：harmonyos_samples项目解析
鸿蒙系统（HarmonyOS），是由华为开发的操作系统，其设计目标是为多种设备提供统一的软件平台。该系统具备分布式架构和跨设备无缝协作的能力，支持不同设备间的高效通信。鸿蒙系统不仅适用于智能手机，还适用于平板...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值