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

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

• 场景一：在页面配景上添加全局水印
  
• 场景二：生存图片添加水印
  
• 场景三：照相添加水印
  
• 场景四：window级别的全局水印
  

方案描述
场景一：
在页面配景上添加全局水印
效果图：

方案
页面全局水印的实现思路是利用透明配景的canvas画布绘制文字水印，在利用Stack组件叠加在page跟容器上
方式一：利用canvas进行绘制

1. Stack({ alignContent: Alignment.Center }) {
3. Column() {
5. Text("没有数据哦").fontColor("#495057")
7. Image($r("app.media.empty")).width(300)
9. }
11. Canvas(this.context)
13. .width("100%")
15. .height("100%")
17. .hitTestBehavior(HitTestMode.Transparent)
19. .onReady(() => {
21. this.context.fillStyle = '#10000000'
23. this.context.font = "16vp"
25. this.context.textAlign = "center"
27. this.context.textBaseline = "middle"
29. // 在这里绘制文字水印，也可以是图片水印
31. for (let i = 0; i < this.context.width / 120; i++) {
33. this.context.translate(120, 0)
35. let j = 0
37. for (; j < this.context.height / 120; j++) {
39. this.context.rotate(-Math.PI / 180 * 30)
41. // 此处水印数据是写死的，具体请替换为自己的水印
43. this.context.fillText("水印水印水印", -60, -60)
45. this.context.rotate(Math.PI / 180 * 30)
47. this.context.translate(0, 120)
49. }
51. this.context.translate(0, -120 * j)
53. }
55. })
57. }.layoutWeight(1)

复制代码

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

1. @Builder
3. Watermark() {
5. Canvas(this.context)
7. .width("100%")
9. .height("100%")
11. .hitTestBehavior(HitTestMode.Transparent)
13. .onReady(() => {
15. this.context.fillStyle = '#10000000'
17. this.context.font = "16vp"
19. this.context.textAlign = "center"
21. this.context.textBaseline = "middle"
23. // 在这里绘制文字水印，也可以是图片水印
25. for (let i = 0; i < this.context.width / 120; i++) {
27. this.context.translate(120, 0)
29. let j = 0
31. for (; j < this.context.height / 120; j++) {
33. this.context.rotate(-Math.PI / 180 * 30)
35. // 此处水印数据是写死的，具体请替换为自己的水印
37. this.context.fillText("水印水印水印", -60, -60)
39. this.context.rotate(Math.PI / 180 * 30)
41. this.context.translate(0, 120)
43. }
45. this.context.translate(0, -120 * j)
47. }
49. })
51. }
54. Column() {
56. Text("没有数据哦").fontColor("#495057")
58. Image($r("app.media.empty")).width(300)
60. }
62. .layoutWeight(1)
64. .overlay(this.Watermark())
66. .width("100%")

复制代码

场景二：
生存图片添加水印
方案
利用OffScreenCanvas离屏画布拿到图片源数据，在离屏画布上利用OffscreenCanvasRenderingContext2D.drawImage方法讲图片数据进行绘制，利用OffscreenCanvasRenderingContext2D.fillText方法绘制文字水印，通过 OffscreenCanvasRenderingContext2D.getPixelMap方法获取添加水印后的图片pixelMap数据，再通过安全控件方式拿到图库的uri路径，在这个uri下通过image.createImagePacker方法创建图片文件，通过fs.write方法写入这个图库的文件中，具体实当代码如下所示
核心代码
第一步：利用resourceManager.getMediaContent方法获取当前的图片资源

1. getContext(this).resourceManager.getMediaContent($r(this.imagePath)).then((data) => {
3. // ...
5. }).catch((err: BusinessError) => {
7. console.log("getPixelMap error" + err.message)
9. })

复制代码

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

1. let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)
3. let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);
5. imageSource.getImageInfo((err, value) => {
7. if (err) {
9. return;
11. }
13. let opts: image.DecodingOptions = {
15. editable: true,
17. desiredSize: {
19. height: value.size.height,
21. width: value.size.width
23. }
25. };
27. imageSource.createPixelMap(opts, async (err, pixelMap) => {
29. // 这个回调的pixelMap就是当前图片的pixelMap
31. let offScreenCanvas = new OffscreenCanvas(value.size.width, value.size.height)
33. let OffScreenContext = offScreenCanvas.getContext("2d")
35. this.imageScale = offScreenCanvas.width / display.getDefaultDisplaySync().width
37. OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)
39. // ...
41. })
43. })

复制代码

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

1. getContext(this).resourceManager.getMediaContent($r(this.imagePath)).then((data)
3. let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)
5. let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);
7. imageSource.getImageInfo((err, value) => {
9. if (err) {
11. return;
13. }
15. let opts: image.DecodingOptions = {
17. editable: true,
19. desiredSize: {
21. height: value.size.height,
23. width: value.size.width
25. }
27. };
29. imageSource.createPixelMap(opts, async (err, pixelMap) => {
31. // ...
33. OffScreenContext.textAlign = "right"
35. OffScreenContext.textBaseline = "bottom"
37. OffScreenContext.fillStyle = '#30000000'
39. OffScreenContext.font = 32 * this.imageScale + "vp"
41. OffScreenContext.fillText("初九会画画", offScreenCanvas.width - 20 * this.imageScale, offScreenCanvas.height - 20 * this.imageScale)
43. // ...
45. })
47. })
49. }).catch((err: BusinessError) => {
51. console.log("getPixelMap error" + err.message)
53. })

复制代码

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

1. // 获取新的PixelMap
3. this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)

复制代码

第五步：利用SaveButton生存到图库中

1. SaveButton({ icon: SaveIconStyle.FULL_FILLED }).onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
3. if (result == SaveButtonOnClickResult.SUCCESS) {
5. try {
7. let context = getContext(this);
9. let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
11. let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 创建媒体文件
13. this.imagePath = "app.media.img1"
15. this.addWatermark()
17. if (this.pixelMap) {
19. saveToFile(this.pixelMap, uri)
21. }
23. } catch (err) {
25. console.error('createAsset failed, message = ', err);
27. }
29. } else {
31. console.error('SaveButtonOnClickResult createAsset failed');
33. }
35. })

复制代码

场景三：
照相添加水印
方案
利用cameraPicker拉起系统相机照相，拿到返回的picker.PickerResult.resultUri后利用fs.openSync读出图片文件转化为pixelMap，利用image组件渲染在页面上，在生存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后生存
核心代码
第一步：利用cameraPicker拉起系统相机

1. import picker from '@ohos.multimedia.cameraPicker';
3. import camera from '@ohos.multimedia.camera';
7. async openCamera() {
9. try {
11. let pickerProfile: picker.PickerProfile = {
13. cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
15. };
17. let pickerResult: picker.PickerResult = await picker.pick(getContext(this),
19. [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO], pickerProfile);
21. console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
23. // ...
25. } catch (error) {
27. let err = error as BusinessError;
29. console.error(`the pick call failed. error code: ${err.message}`);
31. }
33. }

复制代码

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

1. @State pixelMap: image.PixelMap | null = null
3. async openCamera() {
5. try {
7. // ...
9. if (pickerResult.resultUri) {
11. this.showImage = true
13. }
15. let file = fs.openSync(pickerResult.resultUri)
17. let buffer = new ArrayBuffer(fs.statSync(file.fd).size)
19. fs.readSync(file.fd, buffer)
21. let imageSource: image.ImageSource = image.createImageSource(buffer)
23. imageSource.getImageInfo((err, value) => {
25. if (err) {
27. return;
29. }
31. let opts: image.DecodingOptions = {
33. editable: true,
35. desiredSize: {
37. height: value.size.height,
39. width: value.size.width
41. }
43. };
45. imageSource.createPixelMap(opts, async (err, pixelMap) => {
47. this.pixelMap = pixelMap
51. })
53. })
55. } catch (error) {
57. let err = error as BusinessError;
59. console.error(`the pick call failed. error code: ${err.message}`);
61. }
63. }
67. build() {
69. // ...
71. if(this.showImage) {
73. Image(this.pixelMap).width("100%")
75. // ...
77. }
79. }

复制代码

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

1. addWaterMask(pixelMap: image.PixelMap) {
3. this.imageScale = this.imageWidth / display.getDefaultDisplaySync().width
5. const canvas = new drawing.Canvas(pixelMap)
7. const pen = new drawing.Pen()
9. pen.setColor({ alpha: 255, red: 0, green: 10, blue: 10 })
13. const font = new drawing.Font()
15. font.setSize(32 * this.imageScale)
17. let textWidth = font.measureText("初九会画画", drawing.TextEncoding.TEXT_ENCODING_UTF8)
21. const brush = new drawing.Brush()
23. brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 })
27. const textBlob = drawing.TextBlob.makeFromString("初九会画画", font, drawing.TextEncoding.TEXT_ENCODING_UTF8)
29. canvas.attachBrush(brush)
31. canvas.attachPen(pen)
33. canvas.drawTextBlob(textBlob, this.imageWidth - 20 * this.imageScale - textWidth, this.imageHeight - 20 * this.imageScale)
35. canvas.detachBrush();
37. canvas.detachPen()
39. return pixelMap
41. }
44. SaveButton()
46. .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
48. if (result == SaveButtonOnClickResult.SUCCESS) {
50. try {
52. let context = getContext(this);
54. let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
56. let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); // 创建媒体文件
58. saveToFile(this.addWaterMask(this.pixelMap!), uri);
60. } catch (err) {
62. console.error('createAsset failed, message = ', err);
64. }
66. } else {
68. console.error('SaveButtonOnClickResult createAsset failed');
70. }
72. })

复制代码

最后

小编在之前的鸿蒙系统扫盲中，有很多朋侪给我留言，差异的角度的问了一些问题，我明显感觉到一点，那就是很多人参与鸿蒙开辟，但是又不知道从那里动手，因为资料太多，太杂，传授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开辟技术？不知道需要重点把握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，最终浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习黑白常有必要的。 
为了确保高效学习，发起规划清楚的学习路线，涵盖以下关键阶段：
 →【纯血版鸿蒙全套最新学习文档】渴望这一份鸿蒙学习文档能够给大家带来帮助~

---

 鸿蒙（HarmonyOS NEXT）最新学习路线

​
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级装备开辟，不仅增补了华为官网未涉及的办理方案
路线图得当人群：
IT开辟职员：想要拓展职业边界
零基础小白：鸿蒙爱好者，渴望从0到1学习，增加一项技能。
技术提拔/进阶跳槽：发展瓶颈期，提拔职场竞争力，快速把握鸿蒙技术
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

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

​​​​鸿蒙APP开辟必备

​​
总结
【纯血版鸿蒙全套最新学习文档】
总的来说，华为鸿蒙不再兼容安卓，对步调员来说是一个挑衅，也是一个机会。只有积极应对变革，不停学习和提拔本身，才华在这个变革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。