HarmonyOS 鸿蒙Next中给照片添加图片、文字水印实践分享

HarmonyOS 鸿蒙Next中给照片添加图片、文字水印实践分享 水印主要分为图片水印跟文字水印两种，本文主要通过OffscreenCanvas组件通过自定义绘制的方法实现图片上打上水印的操作。

首先需要拿到图片并将其转换成ArrayBuffer类型的数据流，可通过picker选取本地图片或者downloadFile下载网络图片的方式通过openSync、statSync、new ArrayBuffer后拿到ArrayBuffer数据流，

其次将需要打上水印的图片以及图片形式的水印转码成PixelMap。

最后通过创建OffscreenCanvas对象将需要打上水印的图片跟图片形式的水印和文字绘制成一张图片导出。

实例：

let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
let fileIoStat = fs.lstatSync(filePath);
let buffArr = new ArrayBuffer(fileIoStat.size);

// 将media文件下的图片水印转码成PixelMap
let decodingOptions : image.DecodingOptions = {
    editable: true,
    desiredPixelFormat: 3,
}

// 选取水印
let watermarkImg = await getContext(this).resourceManager.getMediaContent('media下的水印图片')

// 切片
let watermarkImgBuffer = watermarkImg.buffer.slice(watermarkImg.byteOffset, watermarkImg.byteLength + watermarkImg.byteOffset) 
let watermarkImgSource: image.ImageSource = image.createImageSource(watermarkImgBuffer)

// 将水印图片创建成PixelMap
let watermarkImgPixelMaps = await watermarkImgSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
    return pixelMap
})

// 将需要打上水印的照片转码成PixelMap
let imageSourceNew: image.ImageSource = image.createImageSource(buffArrs);
let pixelMapsNew = await imageSourceNew.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
    return pixelMap
})

// 绘制水印照片
let offScreenCanvas = new OffscreenCanvas(imageInfo.size.width + this.watermarkInfo.ZWidth, newHeight)
// 填充背景
let OffScreenContext = offScreenCanvas.getContext("2d", settings)
OffScreenContext.fillRect(0,0,width, height) 

// 将需要打上水印的照片绘制到画布中
OffScreenContext.drawImage(pixelMapsNew, x,y, width, height)

// 打上文字水印
OffScreenContext.fillText(text, x, y)

// 打上图片水印
OffScreenContext.drawImage(watermarkImgPixelMaps, x,y, width,height)

// 生成PixelMap
let pixelMapsNews = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)

// 最终获取buff文件流，写入文件保存即可得到一张水印图片
imagePackerApi.packing(pixelMapsNews, packOpts).then((data: ArrayBuffer) => {
    buffArrs = data
})
.catch((error: BusinessError) => {
    console.error('Failed to pack the image. And the error is: ' + error);
})