鸿蒙开发5.0【基于原生的水印添加能力】

爱桥代码的程序媛

于 2024-08-22 16:13:43 发布

阅读量526

点赞数 7

分类专栏：鸿蒙文章标签： harmonyos 鸿蒙开发鸿蒙子线程 UI openharmony 程序员

本文链接：https://blog.csdn.net/2301_76813281/article/details/141427825

版权

鸿蒙专栏收录该内容

387 篇文章 4 订阅

订阅专栏

场景描述

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

场景一：在页面背景上添加全局水印
场景二：保存图片添加水印
场景三：拍照添加水印
场景四：window级别的全局水印

方案描述

场景一：

在页面背景上添加全局水印

效果图：

方案

页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印，在使用Stack组件叠加在page跟容器上

方式一：使用canvas进行绘制

Stack({ alignContent: Alignment.Center }) {

Column() {

Text("没有数据哦").fontColor("#495057")

Image($r("app.media.empty")).width(300)

}

Canvas(this.context)

.width("100%")

.height("100%")

.hitTestBehavior(HitTestMode.Transparent)

.onReady(() => {

this.context.fillStyle = '#10000000'

this.context.font = "16vp"

this.context.textAlign = "center"

this.context.textBaseline = "middle"

// 在这里绘制文字水印，也可以是图片水印

for (let i = 0; i < this.context.width / 120; i++) {

this.context.translate(120, 0)

let j = 0

for (; j < this.context.height / 120; j++) {

this.context.rotate(-Math.PI / 180 * 30)

// 此处水印数据是写死的，具体请替换为自己的水印

this.context.fillText("水印水印水印", -60, -60)

this.context.rotate(Math.PI / 180 * 30)

this.context.translate(0, 120)

}

this.context.translate(0, -120 * j)

}

})

}.layoutWeight(1)

方式二：使用overlay属性绘制

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

@Builder

Watermark() {

Canvas(this.context)

.width("100%")

.height("100%")

.hitTestBehavior(HitTestMode.Transparent)

.onReady(() => {

this.context.fillStyle = '#10000000'

this.context.font = "16vp"

this.context.textAlign = "center"

this.context.textBaseline = "middle"

// 在这里绘制文字水印，也可以是图片水印

for (let i = 0; i < this.context.width / 120; i++) {

this.context.translate(120, 0)

let j = 0

for (; j < this.context.height / 120; j++) {

this.context.rotate(-Math.PI / 180 * 30)

// 此处水印数据是写死的，具体请替换为自己的水印

this.context.fillText("水印水印水印", -60, -60)

this.context.rotate(Math.PI / 180 * 30)

this.context.translate(0, 120)

}

this.context.translate(0, -120 * j)

}

})

}


Column() {

Text("没有数据哦").fontColor("#495057")

Image($r("app.media.empty")).width(300)

}

.layoutWeight(1)

.overlay(this.Watermark())

.width("100%")

场景二：

保存图片添加水印

方案

使用OffScreenCanvas离屏画布拿到图片源数据，在离屏画布上使用OffscreenCanvasRenderingContext2D.drawImage方法讲图片数据进行绘制，使用OffscreenCanvasRenderingContext2D.fillText方法绘制文字水印，通过 OffscreenCanvasRenderingContext2D.getPixelMap方法获取添加水印后的图片pixelMap数据，再通过安全控件方式拿到图库的uri路径，在这个uri下通过image.createImagePacker方法创建图片文件，通过fs.write方法写入这个图库的文件中，具体实现代码如下所示

核心代码

第一步：使用resourceManager.getMediaContent方法获取当前的图片资源

getContext(this).resourceManager.getMediaContent($r(this.imagePath)).then((data) => {

// ...

}).catch((err: BusinessError) => {

console.log("getPixelMap error" + err.message)

})

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

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, async (err, pixelMap) => {

// 这个回调的pixelMap就是当前图片的pixelMap

let offScreenCanvas = new OffscreenCanvas(value.size.width, value.size.height)

let OffScreenContext = offScreenCanvas.getContext("2d")

this.imageScale = offScreenCanvas.width / display.getDefaultDisplaySync().width

OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)

// ...

})

})

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

getContext(this).resourceManager.getMediaContent($r(this.imagePath)).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, async (err, pixelMap) => {

// ...

OffScreenContext.textAlign = "right"

OffScreenContext.textBaseline = "bottom"

OffScreenContext.fillStyle = '#30000000'

OffScreenContext.font = 32 * this.imageScale + "vp"

OffScreenContext.fillText("初九会画画", offScreenCanvas.width - 20 * this.imageScale, offScreenCanvas.height - 20 * this.imageScale)

// ...

})

})

}).catch((err: BusinessError) => {

console.log("getPixelMap error" + err.message)

})

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

// 获取新的PixelMap

this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)

第五步：使用SaveButton保存到图库中

SaveButton({ icon: SaveIconStyle.FULL_FILLED }).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, 'jpg'); // 创建媒体文件

this.imagePath = "app.media.img1"

this.addWatermark()

if (this.pixelMap) {

saveToFile(this.pixelMap, uri)

}

} catch (err) {

console.error('createAsset failed, message = ', err);

}

} else {

console.error('SaveButtonOnClickResult createAsset failed');

}

})

场景三：

拍照添加水印

方案

使用cameraPicker拉起系统相机拍照，拿到返回的picker.PickerResult.resultUri后使用fs.openSync读出图片文件转化为pixelMap，使用image组件渲染在页面上，在保存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后保存

核心代码

第一步：使用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}`);

}

}

第二步：将相机拍摄的照片渲染在页面中，使用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%")

// ...

}

}

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

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("初九会画画", 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("初九会画画", 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

}


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');

}

})

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！

爱桥代码的程序媛

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发5.0【基于原生的水印添加能力】

添加水印是一个比较常见的功能，下面列举一些遇到的业务需求：- 场景一：在页面背景上添加全局水印- 场景二：保存图片添加水印- 场景三：拍照添加水印- 场景四：window级别的全局水印
复制链接

扫一扫

专栏目录