自定义相机拍照,在拍摄预览画面上及拍照后的存档照片上添加图片和文字信息的水印效果,HarmonyOS 鸿蒙Next该怎么做?
自定义相机拍照,在拍摄预览画面上及拍照后的存档照片上添加图片和文字信息的水印效果,HarmonyOS 鸿蒙Next该怎么做? 自定义相机拍照,我要在拍摄预览画面上及拍照后的存档照片上添加图片和文字信息的水印效果,我该怎么做?
楼主,参考下这个帖子,
https://developer.huawei.com/consumer/cn/forum/topic/0207166792818607818?fid=0109140870620153026
更多关于自定义相机拍照,在拍摄预览画面上及拍照后的存档照片上添加图片和文字信息的水印效果,HarmonyOS 鸿蒙Next该怎么做?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现自定义相机拍照并在预览画面及存档照片上添加图片和文字信息的水印效果,可以通过以下步骤完成:
-
相机初始化:使用
CameraAbility
类初始化相机,配置相机参数,如分辨率、对焦模式等。 -
预览画面处理:通过
SurfaceProvider
获取预览画面的Surface
,使用PixelMap
类加载水印图片,并通过Canvas
将水印绘制到预览画面上。文字水印可以使用Text
类设置字体、大小、颜色等属性,同样通过Canvas
绘制。 -
拍照处理:在拍照回调中获取拍摄的图片数据,使用
ImageReceiver
将图片数据转换为PixelMap
。然后通过Canvas
将水印图片和文字信息绘制到PixelMap
上。 -
保存照片:将处理后的
PixelMap
通过ImagePacker
转换为JPEG或PNG格式,并保存到指定路径。 -
释放资源:在操作完成后,释放相机、
PixelMap
等资源,避免内存泄漏。
代码示例:
import camera from '@ohos.multimedia.camera';
import image from '@ohos.multimedia.image';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
async function addWatermarkToPhoto() {
const cameraManager = camera.getCameraManager();
const cameras = cameraManager.getSupportedCameras();
const cameraInput = cameraManager.createCameraInput(cameras[0]);
const previewOutput = cameraManager.createPreviewOutput();
const photoOutput = cameraManager.createPhotoOutput();
const surfaceId = await previewOutput.getSurfaceId();
const surfaceProvider = new camera.SurfaceProvider(surfaceId);
const watermarkPixelMap = await image.createPixelMapFromPath('watermark.png');
const canvas = new Canvas(surfaceProvider.getSurface());
canvas.drawPixelMap(watermarkPixelMap, { x: 10, y: 10 });
canvas.drawText('Sample Text', { x: 50, y: 50 });
photoOutput.capture((err, photo) => {
if (err) {
console.error('Capture failed', err);
return;
}
const imageReceiver = photo.getImageReceiver();
const pixelMap = imageReceiver.readNextImage();
const canvas2 = new Canvas(pixelMap);
canvas2.drawPixelMap(watermarkPixelMap, { x: 10, y: 10 });
canvas2.drawText('Sample Text', { x: 50, y: 50 });
const imagePacker = image.createImagePacker();
imagePacker.packing(pixelMap).then((data) => {
const mediaLib = mediaLibrary.getMediaLibrary();
mediaLib.createAsset('photo.jpg', mediaLibrary.MediaType.IMAGE, data);
});
});
}