HarmonyOS拍照后图片添加水印

目前我们APP 有一个需求，使用camera里面的api自定义拍照，拍出的照片添加当前位置信息的水印到图片上面，请问目前HarmonyOSapi有这一块的实现方案吗？

HarmonyOS

zxjiu

2025-01-09 14:25:08

1.8w浏览

回答 1

按赞同

按时间

superinsect

第一步：使用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}`);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

第二步：将相机拍摄的照片渲染在页面中，使用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%")
    // ...
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

第三步：使用drawing.TextBlob.makeFromString绘制水印后

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("昵称ID", 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("昵称ID", 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
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

第四步使用SaveButton保存在系统相册中

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');
    }
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

获取当前位置可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-geolocationmanager-V5#geolocationmanagergetcurrentlocation

照片添加水印完整demo可参考：

https://gitee.com/harmonyos_samples/watermark