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
  //   生成ImageSource
  let source = image.createImageSource(buffer)
  // 转化成pixelmap
  this.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 = undefined

  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 req = http.createHttp()
        req.request('https://pic.616pic.com/ys_img/01/17/47/eVnQ1JdIY4.jpg').then((res) => {
          // 获取图片字节
          let buffer = res.result as ArrayBuffer
          //   生成ImageSource
          let source = image.createImageSource(buffer)
          // 转化成pixelmap
          this.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 = undefined

  aboutToAppear(): 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 ArrayBuffer
      let 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)
        // 创建imagesource
        let source = image.createImageSource(file.fd)
        //  获得pixelmap
        this.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 = undefined

  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 resoucemanager = getContext(this).resourceManager
        //  获取rawfile中图片的描述符
        let fd = resoucemanager.getRawFdSync('head.jpg')
        // 根据文件描述符创建imagesource
        let source = image.createImageSource(fd)
        // 创建pixelmap
        this.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不能直接使用 它是用户uri
  let uri = value.photoUris[0]
  //   获取该uri对应的文件
  let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
  //  生成source
  let 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 = undefined

  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 photopicker = new photoAccessHelper.PhotoViewPicker()
        // 选择图片的配置  最多选择一张图片,支持编辑
        let selectoption: photoAccessHelper.PhotoSelectOptions = {
          maxSelectNumber: 1,
          isEditSupported: true
        }
        photopicker.select(selectoption).then((value) => {
          // 获取相册图片uri 注意此处uri不能直接使用 它是用户uri
          let uri = value.photoUris[0]
          //   获取该uri对应的文件，这里要只读打开否则无权限在
          let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
          //  生成source
          let source = image.createImageSource(file.fd)
          //   获取pixelmap对象
          this.src = source.createPixelMapSync()
        })

      })
    }
    .height('100%')
    .width('100%')
  }
}