HarmonyOS 鸿蒙Next如何给图片右下角增加文字水印

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何给图片右下角增加文字水印

我看到官方demo 添加水印如下

import { image } from '@kit.ImageKit'

@Entry
@Component
struct Index {
  @State pixelMap: PixelMap | null = null

  aboutToAppear(): void {
    getContext(this).resourceManager.getMediaContent($r("app.media.startIcon")).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, (err,
          pixelMap) => { // 这个回调的pixelMap就是当前图片的pixelMap
          let offScreenCanvas = new OffscreenCanvas(value.size.width, value.size.height)
          let OffScreenContext = offScreenCanvas.getContext("2d")
          OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)
          OffScreenContext.fillStyle = '#30000000'
          OffScreenContext.font = "50px"
          OffScreenContext.fillText("水印水印水印水印水印", 20,
            30)
          // 获取新的PixelMap
          this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)
        })
      })
    })
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image(this.pixelMap).width(100).height(100)
    }.width('100%').height('100%')
  }
}

但是我发现我无法在图片右下角添加水印 我的思路是通过 measure.measureTextSize 去获取将要添加水印的文字大小, 但是这个方法返回的值, 并不能满足我的需求.


更多关于HarmonyOS 鸿蒙Next如何给图片右下角增加文字水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以看下我这demo，在右下角加水印 

import { image } from '[@kit](/user/kit).ImageKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) pixelMap: PixelMap | null = null

aboutToAppear(): void {
getContext(this).resourceManager.getMediaContent($r("app.media.startIcon")).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, (err, pixelMap) => {
// 这个回调的pixelMap就是当前图片的pixelMap
let offScreenCanvas = new OffscreenCanvas(value.size.width, value.size.height)
let OffScreenContext = offScreenCanvas.getContext("2d")
OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)
OffScreenContext.fillStyle = '#30000000'
OffScreenContext.font = "50px"
OffScreenContext.fillText("水印水印水印水印水印", 70, 130)
// 获取新的PixelMap
this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)
})
})
})
}

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Image(this.pixelMap).width(100).height(100)
}
.width('100%')
.height('100%')
}
}

更多关于HarmonyOS 鸿蒙Next如何给图片右下角增加文字水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问这个官方demo链接是什么，我有个功能想加

在HarmonyOS 鸿蒙Next系统中，给图片右下角增加文字水印的方法如下：

对于普通用户，可以直接使用手机相册的图片编辑功能。打开相册，选择需要添加水印的图片，进入编辑界面，找到并点击“更多”或类似选项，然后选择“水印”功能。在此处，你可以选择预设的水印样式，或手动输入想要的文字，并将其拖动到图片右下角的位置，确认后保存图片即可。

对于开发者，可以通过编程方式实现自定义水印。首先，获取图片的pixelMap对象，然后使用Canvas组件或OffscreenCanvas绘制水印。具体步骤如下：

  1. 创建一个Canvas或OffscreenCanvas对象，并获取其绘图上下文。
  2. 将图片的pixelMap对象绘制到Canvas或OffscreenCanvas上。
  3. 使用绘图上下文设置水印文字的字体、颜色、对齐方式等属性。
  4. 在Canvas或OffscreenCanvas的右下角位置绘制水印文字。
  5. 获取绘制完成后的新的pixelMap对象，并将其保存为图片文件。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部