鸿蒙5.0实战案例:基于ImageKit对图片进行处理

往期推文全新看点(文中附带全新鸿蒙5.0全栈学习笔录)

✏️ 鸿蒙(HarmonyOS)北向开发知识点记录~

✏️ 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景?

✏️ 嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~

✏️ 对于大前端开发来说,转鸿蒙开发究竟是福还是祸?

✏️ 鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中......


步骤一:获取图片。

方法一:通过沙箱路径获取:

复制代码
const context : Context = getContext(this);

const filePath : string = context.cacheDir + '/test.jpg';

方法二:通过沙箱路径获取图片的文件描述符:

复制代码
const context = getContext(this);

const filePath = context.cacheDir + '/test.jpg';

const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);

const fd : number = file?.fd;

方法三:通过资源管理器获取资源文件的ArrayBuffer:

复制代码
const context : Context = getContext(this);

// 获取resourceManager资源管理器

const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {

console.log("Succeeded in getting RawFileContent")

// 获取图片的ArrayBuffer

const buffer = fileData.buffer.slice(0);

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

console.error("Failed to get RawFileContent")

});

方法四:通过资源管理器获取资源文件的RawFileDescriptor:

复制代码
const context : Context = getContext(this);

// 获取resourceManager资源管理器

const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {

console.log("Succeeded in getting resourceManager")

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

console.error("Failed to get resourceManager")

});

步骤二:创建imageSource。

方法一:通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。

复制代码
// path为已获得的沙箱路径

const imageSource : image.ImageSource = image.createImageSource(filePath);

方法二:通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。

复制代码
// fd为已获得的文件描述符

const imageSource : image.ImageSource = image.createImageSource(fd);

方法三:通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。

复制代码
const imageSource : image.ImageSource = image.createImageSource(buffer);

方法四:通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方案四获取。

复制代码
const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);

步骤三:设置解码参数DecodingOptions,解码获取PixelMap图片对象。

复制代码
let decodingOptions : image.DecodingOptions = {

editable: true,

desiredPixelFormat: 3,

}

// 创建pixelMap并进行简单的旋转和缩放

imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {

// 顺时针旋转90°

pixelMap.rotate(90);



// 宽为原来的0.5

// 高为原来的0.5

pixelMap.scale(0.5, 0.5);

console.log("Succeeded in creating PixelMap")

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

console.error("Failed to create PixelMap")

});

步骤四:图形处理。

场景一:在Ts侧:

创建图像编码ImagePacker对象。

复制代码
const imagePackerApi = image.createImagePacker();

设置编码输出流和编码参数。

format为图像的编码格式;quality为图像质量,范围从0-100,100为最佳质量。

复制代码
let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };

进行图片编码,并保存编码后的图片:

方法一: 通过pixelMap编码。

复制代码
import {BusinessError} from '@ohos.base'

import fs from '@ohos.file.fs'

const context : Context = getContext(this);

const path : string = context.cacheDir + "/pixel_map.jpg";

let file = fs.openSync(path, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);

imagePackerApi.packToFile(pixelMap, file.fd, packOpts).then(() => {

// 直接打包进文件

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

console.error('Failed to pack the image. And the error is: ' + error);

})

方法二:通过imageSource编码。

复制代码
import {BusinessError} from '@ohos.base'

import fs from '@ohos.file.fs'

const context : Context = getContext(this);

const filePath : string = context.cacheDir + "/image_source.jpg";

let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);

imagePackerApi.packToFile(imageSource, file.fd, packOpts).then(() => {

// 直接打包进文件

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

console.error('Failed to pack the image. And the error is: ' + error);

})

场景二:在Native侧:

在ts侧传入pixelmap和文件fd到native侧。

复制代码
const path = getContext(this).filesDir + "imagenative.jpeg";

let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);

let fd =file.fd

testNapi.add1(this.pixelMap,fd)

创建编码器实例对象。

复制代码
napi_value packer;

int32_t result = OH_ImagePacker_Create(env, &packer);

ImagePacker_Native* nativePacker = OH_ImagePacker_InitNative(env, packer);

设置编码参数。

复制代码
struct ImagePacker_Opts_ opts;

// 配置编码格式(必须)

opts.format = "image/jpeg";

// 配置编码质量(必须)

opts.quality = 98;

进行编码。

复制代码
int32_t result = OH_ImagePacker_PackToFile(nativePacker, args[0], &opts, fd);
相关推荐
zhanshuo7 小时前
在鸿蒙里优雅地处理网络错误:从 Demo 到实战案例
harmonyos
zhanshuo7 小时前
在鸿蒙中实现深色/浅色模式切换:从原理到可运行 Demo
harmonyos
whysqwhw13 小时前
鸿蒙分布式投屏
harmonyos
whysqwhw14 小时前
鸿蒙AVSession Kit
harmonyos
whysqwhw16 小时前
鸿蒙各种生命周期
harmonyos
whysqwhw17 小时前
鸿蒙音频编码
harmonyos
whysqwhw17 小时前
鸿蒙音频解码
harmonyos
whysqwhw17 小时前
鸿蒙视频解码
harmonyos
whysqwhw17 小时前
鸿蒙视频编码
harmonyos
ajassi200017 小时前
开源 Arkts 鸿蒙应用 开发(十八)通讯--Ble低功耗蓝牙服务器
华为·开源·harmonyos