HarmonyOS Next应用开发——多种方式实现图片解码

【高心星出品】

图片解码

图片处理就是将设备中保存的图片进行编辑处理然后再存储下来，整个过程需要先图片解码，图片处理，最后在图片编码保存。

图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG、HEIF(不同硬件设备支持情况不同)。

网络图片解码

通过网络请求获取网络图片的字节，生成ImageSource然后生成PixelMap。

获取图片

// 创建请求对象
let req = http.createHttp()
req.request('https://pic.616pic.com/ys_img/01/17/47/eVnQ1JdIY4.jpg').then((res) => {// 获取图片字节let buffer = res.result as ArrayBuffer//   生成ImageSourcelet source = image.createImageSource(buffer)// 转化成pixelmapthis.src = source.createPixelMapSync()

完整代码

import { http } from '@kit.NetworkKit';
import { image } from '@kit.ImageKit';@Entry
@Component
struct InternetPage {@State message: string = 'Hello World';@State src: PixelMap | undefined = undefinedbuild() {Column() {Image(this.src).width(150).height(150).objectFit(ImageFit.Fill).margin({ top: 20 }).border({ width: 2, color: Color.Black })Button('加载图片').margin({ top: 20 }).onClick(() => {// 创建请求对象let req = http.createHttp()req.request('https://pic.616pic.com/ys_img/01/17/47/eVnQ1JdIY4.jpg').then((res) => {// 获取图片字节let buffer = res.result as ArrayBuffer//   生成ImageSourcelet source = image.createImageSource(buffer)// 转化成pixelmapthis.src = source.createPixelMapSync()})})}.height('100%').width('100%')}
}

应用内图片解码

通过获取应用沙箱中文件的描述信息，生成ImageSource然后生成PixelMap。

效果图同上。

获取图片

//   选择图片
let file = fileIo.openSync(getContext(this).getApplicationContext().cacheDir + '/test.jpg',fileIo.OpenMode.READ_ONLY)
// 创建imagesource
let source = image.createImageSource(file.fd)
//  获得pixelmap
this.src = source.createPixelMapSync()

完整代码

import { http } from '@kit.NetworkKit';
import { fileIo } from '@kit.CoreFileKit';
import { image } from '@kit.ImageKit';@Entry
@Component
struct Index {@State message: string = 'Hello World';@State src: PixelMap | undefined = undefinedaboutToAppear(): void {// 下载一个文件保存在cache中let req = http.createHttp()req.request('https://pic.616pic.com/ys_img/01/17/47/eVnQ1JdIY4.jpg').then((res) => {let buffer = res.result as ArrayBufferlet file = fileIo.openSync(getContext(this).getApplicationContext().cacheDir + '/test.jpg',fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE_ONLY)fileIo.writeSync(file.fd, buffer)fileIo.close(file)})}build() {Column() {Image(this.src).width(150).height(150).objectFit(ImageFit.Fill).margin({ top: 20 }).border({width:2,color:Color.Black})Button('加载图片').margin({ top: 20 }).onClick(() => {//   选择图片let file = fileIo.openSync(getContext(this).getApplicationContext().cacheDir + '/test.jpg',fileIo.OpenMode.READ_ONLY)// 创建imagesourcelet source = image.createImageSource(file.fd)//  获得pixelmapthis.src = source.createPixelMapSync()})}.height('100%').width('100%')}
}

应用资源包图片解码

假设在应用的rawfile中存放着一张图片，我们使用方法可以将其转化为PixelMap对象。

运行效果同上。

获取图片

//  获取资源管理器
let resoucemanager = getContext(this).resourceManager
//  获取rawfile中图片的描述符
let fd = resoucemanager.getRawFdSync('head.jpg')
// 根据文件描述符创建imagesource
let source = image.createImageSource(fd)
// 创建pixelmap
this.src = source.createPixelMapSync()

完整代码

import { image } from '@kit.ImageKit';@Entry
@Component
struct ResourcePage {@State message: string = 'Hello World';@State src: PixelMap | undefined = undefinedbuild() {Column() {Image(this.src).width(150).height(150).objectFit(ImageFit.Fill).margin({ top: 20 }).border({ width: 2, color: Color.Black })Button('加载图片').margin({ top: 20 }).onClick(() => {//  获取资源管理器let resoucemanager = getContext(this).resourceManager//  获取rawfile中图片的描述符let fd = resoucemanager.getRawFdSync('head.jpg')// 根据文件描述符创建imagesourcelet source = image.createImageSource(fd)// 创建pixelmapthis.src = source.createPixelMapSync()})}.height('100%').width('100%')}
}

用户图库图片解码

可以从用户相册中选择图片解码，由于鸿蒙做了用户和应用的隔离机制，所以图库选择图片较为复杂。

获取图片

//   创建图片选择器
let photopicker = new photoAccessHelper.PhotoViewPicker()
// 选择图片的配置  最多选择一张图片,支持编辑
let selectoption: photoAccessHelper.PhotoSelectOptions = {maxSelectNumber: 1,isEditSupported: true
}
photopicker.select(selectoption).then((value) => {// 获取相册图片uri 注意此处uri不能直接使用 它是用户urilet uri = value.photoUris[0]//   获取该uri对应的文件let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)//  生成sourcelet source = image.createImageSource(file.fd)//   获取pixelmap对象this.src = source.createPixelMapSync()

完整代码

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { image } from '@kit.ImageKit';@Entry
@Component
struct UserPage {@State message: string = 'Hello World';@State src: PixelMap | undefined = undefinedbuild() {Column() {Image(this.src).width(150).height(150).objectFit(ImageFit.Fill).margin({ top: 20 }).border({ width: 2, color: Color.Black })Button('加载图片').margin({ top: 20 }).onClick(() => {//   创建图片选择器let photopicker = new photoAccessHelper.PhotoViewPicker()// 选择图片的配置  最多选择一张图片,支持编辑let selectoption: photoAccessHelper.PhotoSelectOptions = {maxSelectNumber: 1,isEditSupported: true}photopicker.select(selectoption).then((value) => {// 获取相册图片uri 注意此处uri不能直接使用 它是用户urilet uri = value.photoUris[0]//   获取该uri对应的文件，这里要只读打开否则无权限在let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)//  生成sourcelet source = image.createImageSource(file.fd)//   获取pixelmap对象this.src = source.createPixelMapSync()})})}.height('100%').width('100%')}
}