
回复
本文原创发布在华为开发者社区,更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。
相关场景示例推荐:图库照片滤镜添加
本项目基于OpenHarmony三方库 ImageKnife 进行图片处理场景开发使用:
"@ohos/imageknife": "2.1.1",
"@ohos/gpu_transform": "1.0.2"
在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例:
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { ImageKnife } from '@ohos/imageknife'
export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.loadContent('pages/Index', (err, data) => {
});
// 初始化全局ImageKnife
ImageKnife.with(this.context);
// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
}
}
.onChange((value: number, mode: SliderChangeMode) => {
this.brightNessValue = value
this.showUI = true;
if (mode === SliderChangeMode.End) {
this.textTimerController.reset()
this.textTimerController.start()
}
hilog.info(0x0000,TAG,'value:' + value + 'mode:' + mode.toString())
})
brightnessPixelMap() {
let brightness = this.brightNessValue / 100;
let imageKnifeOption = new RequestOption();
new BrightnessFilterTransformation(brightness);
imageKnifeOption.load(this.mUrl)
.addListener({
callback: (err: BusinessError | string, data: ImageKnifeData) => {
this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
return false;
}
})
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
.skipMemoryCache(true)
.enableGPU()
.brightnessFilter(brightness)
this.ImageKnife?.call(imageKnifeOption);
}
构造contrastPixelMap()函数,通过RequestOption配置对指定图像(由this.mUrl指定)应用对比度滤镜,并获取处理后的图像像素图(this.mBrightnessPixelMap)。
实例化RequestOption类,生成imageKnifeOption,用于配置图像相关操作;
使用this.contrastValue创建ContrastFilterTransformation实例transformation;
通过imageKnifeOption配置图像加载相关参数;
调用this.ImageKnife并传入imageKnifeOption。
contrastPixelMap() {
let imageKnifeOption = new RequestOption();
let transformation = new ContrastFilterTransformation(this.contrastValue);
imageKnifeOption.load(this.mUrl)
.addListener({
callback: (err: BusinessError | string, data: ImageKnifeData) => {
this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
return false;
}
})
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
.skipMemoryCache(true)
.enableGPU()
.contrastFilter(this.contrastValue)
this.ImageKnife?.call(imageKnifeOption);
}
构造setOptions()函数,基于传入的ArrayBuffer数据,配置并加载一个图像相关的Options对象。在配置过程中,设置了图像的宽度、高度以及裁剪函数,并最终加载ArrayBuffer数据。
setOptions(arrayBuffer: ArrayBuffer) {
try {
let optionx = new Options();
optionx.setWidth(800).setHeight(800)
.setCropFunction((err: BusinessError | string, pixelmap: PixelMap | null, sx: number, sy: number) => {
hilog.info(0x0000,TAG,'PMC setCropFunction callback')
if (err) {
hilog.error(0x0000,TAG,'PMC crop err =' + err)
} else {
this.cropOptions.size.width = sx * px2vp(1);
this.cropOptions.size.height = sy * px2vp(1);
if (pixelmap != null) {
this.cropOptions.src = pixelmap;
this.canvasContext.drawImage(pixelmap, 0, 0, this.cropOptions.size.width, this.cropOptions.size.height)
}
}
})
optionx.loadBuffer(arrayBuffer, () => {
this.options1 = optionx;
})
}
}
构造transformRotate()函数,对指定图像(由this.mUrl确定)进行旋转操作,并获取旋转后的图像像素图。
具体步骤如下:
transformRotate() {
let imageKnifeOption = new RequestOption();
let transformation = new RotateImageTransformation(this.mRotate);
imageKnifeOption.load(this.mUrl)
.addListener({
callback: (err: BusinessError | string, data: ImageKnifeData) => {
this.mRotatePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
return false;
}
})
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
.skipMemoryCache(true)
.rotateImage(this.mRotate)
this.ImageKnife?.call(imageKnifeOption);
}