【高心星出品】

圖片解碼

圖片處理就是將設備中保存的圖片進行編輯處理然後再存儲下來，整個過程需要先圖片解碼，圖片處理，最後在圖片編碼保存。

圖片解碼指將所支持格式的存檔圖片解碼成統一的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%')
  }
}