HarmonyOS 5.0 应用开发——多种方式实现图片解码
作者：高心星
- 2024-10-31 江苏
本文字数：3319 字
阅读完需：约 11 分钟
【高心星出品】
图片解码
图片处理就是将设备中保存的图片进行编辑处理然后再存储下来，整个过程需要先图片解码，图片处理，最后在图片编码保存。
图片解码指将所支持格式的存档图片解码成统一的 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@Componentstruct 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)// 创建imagesourcelet source = image.createImageSource(file.fd)// 获得pixelmapthis.src = source.createPixelMapSync()
复制代码
完整代码
import { http } from '@kit.NetworkKit';import { fileIo } from '@kit.CoreFileKit';import { image } from '@kit.ImageKit';
@Entry@Componentstruct 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')// 根据文件描述符创建imagesourcelet source = image.createImageSource(fd)// 创建pixelmapthis.src = source.createPixelMapSync()
复制代码
完整代码
import { image } from '@kit.ImageKit';
@Entry@Componentstruct 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@Componentstruct 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%') }}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
高心星
关注
天将降大任于斯人也，必先苦其心志。 2024-10-17 加入
华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。
评论