鸿蒙（API 12 Beta3版）【利用ImageSource完成图片解码】图片开发引导

图片解码指将所支持格式的存档图片解码成同一的[PixelMap]，以便在应用或体系中举行图片表现或[图片处置惩罚]。当前支持的存档图片格式包罗JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG。
开发步调

• 全局导入Image模块。
  

1. import { image } from '@kit.ImageKit';

复制代码

• 获取图片。
  

• 方法一：获取沙箱路径。详细请参考[获取应用文件路径]应用沙箱的先容及怎样向应用沙箱推送文件
  

1. // Stage模型参考如下代码
2. const context : Context = getContext(this);
3. const filePath : string = context.cacheDir + '/test.jpg';

复制代码

1. // FA模型参考如下代码
2. import { featureAbility } from '@kit.AbilityKit';
4. const context = featureAbility.getContext();
5. const filePath = context.getCacheDir() + "/test.jpg";

复制代码

• 方法二：通过沙箱路径获取图片的文件形貌符。
  

该方法必要先导入@kit.CoreFileKit模块。

1. import { fileIo } from '@kit.CoreFileKit';

复制代码

然后调用fileIo.openSync()获取文件形貌符。

1. // Stage模型参考如下代码
2. const context = getContext(this);
3. const filePath = context.cacheDir + '/test.jpg';
4. const file : fileIo.File = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE);
5. const fd : number = file?.fd;

复制代码

1. // FA模型参考如下代码
2. import { featureAbility } from '@kit.AbilityKit';
4. const context = featureAbility.getContext();
5. const filePath = context.getCacheDir() + "/test.jpg";
6. const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);const fd : number = file?.fd;

复制代码

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

1. // Stage模型
2. const context : Context = getContext(this);
3. // 获取resourceManager资源管理器
4. const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

复制代码

1. // FA模型
2. // 导入resourceManager资源管理器
3. import { resourceManager } from '@kit.LocalizationKit';
4. import { BusinessError } from '@kit.BasicServicesKit';
5. resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
6.    console.log("Succeeded in getting resourceManager")
7. }).catch((err : BusinessError) => {
8.    console.error("Failed to get resourceManager")
9. });

复制代码

差别模子获取资源管理器的方式差别，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。

1. resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
2.    console.log("Succeeded in getting RawFileContent")
3.    // 获取图片的ArrayBuffer
4.    const buffer = fileData.buffer.slice(0);
5. }).catch((err : BusinessError) => {
6.    console.error("Failed to get RawFileContent")
7. });

复制代码

• 方法四：通过资源管理器获取资源文件的RawFileDescriptor。详细请参考[ResourceManager API参考文档]
  

1. // Stage模型
2. const context : Context = getContext(this);
3. // 获取resourceManager资源管理器
4. const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

复制代码

1. // FA模型
2. // 导入resourceManager资源管理器
3. import { resourceManager } from '@kit.LocalizationKit';
4. import { BusinessError } from '@kit.BasicServicesKit';
5. resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
6.    console.log("Succeeded in getting resourceManager")
7. }).catch((err : BusinessError) => {
8.    console.error("Failed to get resourceManager")
9. });

复制代码

差别模子获取资源管理器的方式差别，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。

1. resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
2.    console.log("Succeeded in getting RawFileDescriptor")
3. }).catch((err : BusinessError) => {
4.    console.error("Failed to get RawFileDescriptor")
5. });

复制代码

• 创建ImageSource实例。
  

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

1. // path为已获得的沙箱路径
2. const imageSource : image.ImageSource = image.createImageSource(filePath);

复制代码

• 方法二：通过文件形貌符fd创建ImageSource。文件形貌符可以通过步调2的方法二获取。
  

1. // fd为已获得的文件描述符
2. const imageSource : image.ImageSource = image.createImageSource(fd);

复制代码

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

1. const imageSource : image.ImageSource = image.createImageSource(buffer);

复制代码

• 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步调2的方法四获取。
  

1. const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);

复制代码

• 设置解码参数DecodingOptions，解码获取pixelMap图片对象。
  

• 设置盼望的format举行解码：
  

1. import { BusinessError } from '@kit.BasicServicesKit';
2. import image from '@ohos.multimedia.image';
3. let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
4. let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
5. let decodingOptions : image.DecodingOptions = {
6.    editable: true,
7.    desiredPixelFormat: 3,
8. }
9. // 创建pixelMap
10. imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
11.    console.log("Succeeded in creating PixelMap")
12. }).catch((err : BusinessError) => {
13.    console.error("Failed to create PixelMap")
14. });

复制代码

• HDR图片解码
  

1. import { BusinessError } from '@kit.BasicServicesKit';
2. import image from '@ohos.multimedia.image';
3. let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
4. let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
5. let decodingOptions : image.DecodingOptions = {
6.    //设置为AUTO会根据图片资源格式解码，如果图片资源为HDR资源则会解码为HDR的pixelmap。
7.    desiredDynamicRange: image.DecodingDynamicRange.AUTO,
8. }
9. // 创建pixelMap
10. imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
11.    console.log("Succeeded in creating PixelMap")
12.    // 判断pixelmap是否为hdr内容
13.    let info = pixelMap.getImageInfoSync();
14.    console.log("pixelmap isHdr:" + info.isHdr);
15. }).catch((err : BusinessError) => {
16.    console.error("Failed to create PixelMap")
17. });

复制代码

解码完成，获取到pixelMap对象后，可以举行后续[图片处置惩罚]

• 开释pixelMap。
  

1. pixelMap.release();

复制代码

开发示例-对资源文件中的图片举行解码

• 获取resourceManager资源管理。
  

1. const context : Context = getContext(this);
2. // 获取resourceManager资源管理
3. const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

复制代码

• 创建ImageSource。
  

• 通过rawfile文件夹下test.jpg的ArrayBuffer创建。
  

1. resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {    console.log("Succeeded in getting RawFileContent")    // 获取图片的ArrayBuffer    const buffer = fileData.buffer.slice(0);    const imageSource : image.ImageSource = image.createImageSource(buffer);
2. }).catch((err : BusinessError) => {    console.error("Failed to get RawFileContent") });

复制代码

• 通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
  

1. resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {    console.log("Succeeded in getting RawFd")    const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
2. }).catch((err : BusinessError) => {    console.error("Failed to get RawFd") });

复制代码

• 创建pixelMap。
  

1. imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
2.    console.log("Succeeded in creating PixelMap")
3. }).catch((err : BusinessError) => {
4.    console.error("Failed to creating PixelMap")
5. });

复制代码

• 开释pixelMap。
  

1. pixelMap.release();

复制代码

末了呢

很多开发朋侪不知道必要学习那些鸿蒙技能？鸿蒙开发岗位必要把握那些焦点技能点？为此鸿蒙的开发学习必须要体系性的举行。
而网上有关鸿蒙的开发资料非常的少，如果你想学好鸿蒙的应用开发与体系底层开发。你可以参考这份资料，少走很多弯路，节流没须要的贫苦。由两位前阿里高级研发工程师团结打造的《鸿蒙NEXT星河版OpenHarmony开发文档》内里内容包罗了（ArkTS、ArkUI开发组件、Stage模子、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点
如果你是一名Android、Java、前端等等开发职员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习门路图。

针对鸿蒙发展门路打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，资助各人在技能的门路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
  
• 《鸿蒙生态应用开发V2.0白皮书》
  
• 《鸿蒙 (OpenHarmony)开发根本到实战手册》
  
• OpenHarmony北向、南向开发情况搭建
  
• 《鸿蒙开发根本》
  
• 《鸿蒙开发进阶》
  
• 《鸿蒙开发实战》
  

总结

鸿蒙—作为国家主力推送的国产利用体系。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
而且鸿蒙是完全具备无与伦比的机会和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，将来将会支持 50 万款的应用。那么这么多的应用必要开发，也就意味着必要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来发作式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金