图片处理,应用开发中的图片开发是对图片像素数据进行解析、处理、构造的过程,达到目标图片效果

图片处理

HarmonyOS
2024-05-21 22:01:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
jshyb

应用开发中的图片开发是对图片像素数据进行解析、处理、构造的过程,达到目标图片效果,主要涉及图片解码、图片处理、图片编码等。

图片解码

指将所支持格式的存档图片解码成统一的PixelMap,以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG。

PixelMap

指图片解码后无压缩的位图,用于图片显示或图片处理。

图片处理

指对PixelMap进行相关的操作,如旋转、缩放、设置透明度、获取图片信息、读写像素数据等。

图片编码

指将PixelMap编码成不同格式的存档图片(当前仅支持JPEG和WebP),用于后续处理,如保存、传输等。

使用的核心API

@ohos.multimedia.image (图片处理):模块提供图片处理效果,包括通过属性创建PixelMap、读取图像像素数据、读取区域内的图片数据等

核心代码

@Entry 
@Component 
struct Index{ 
  @State imagePixelMap:PixelMap = undefined 
  @State edit:boolean = false 
  
  @Builder buttonModel($$:{textContent,action}){ 
    Button($$.textContent) 
      .fontSize(14) 
      .height(30) 
      .width(60) 
      .borderRadius(10) 
      .backgroundColor('#E8A027') 
      .onClick(()=>{ 
        $$.action 
        this.edit = true 
      }) 
  } 
  
  async get_pixelmap(){ 
    // 获取resourceManager资源管理 
    const context = getContext(this) 
    const resourceMgr = context.resourceManager 
    // 获取rawfile文件夹下httpimage.PNG的ArrayBuffer 
    const fileData = await resourceMgr.getMediaContent($r('app.media.icon')) 
    const buffer = fileData.buffer 
    // 创建imageSource 
    const imageSource = image.createImageSource(buffer) 
    // 创建PixelMap 
    const pixelMap = await imageSource.createPixelMap() 
    return pixelMap 
  } 
  
  // 对pixelMap进行裁剪 
  async crop_image(){ 
    let pixelMap = await this.get_pixelmap() 
    // x:裁剪起始点横坐标0 
    // y:裁剪起始点纵坐标0 
    // height:裁剪高度300,方向为从上往下(裁剪后的图片高度为300) 
    // width:裁剪宽度300,方向为从左到右(裁剪后的图片宽度为300) 
    pixelMap.crop({x:0,y:0,size:{height:300,width:300}}) 
    this.imagePixelMap = pixelMap 
  } 
  
  // 对pixelMap进行缩放 
  async scale_image(){ 
    let pixelMap = await this.get_pixelmap() 
    pixelMap.scale(0.5,0.5) 
    this.imagePixelMap = pixelMap 
  } 
  
  // 对pixelMap进行偏移 
  async translate_image(){ 
    let pixelMap = await this.get_pixelmap() 
    pixelMap.translate(100,100); 
    this.imagePixelMap = pixelMap 
  } 
  
  // 对pixelMap进行旋转 
  async rotate_image(){ 
    let pixelMap = await this.get_pixelmap() 
    pixelMap.rotate(90); 
    this.imagePixelMap = pixelMap 
  } 
  
  // 对pixelMap进行翻转 
  // 垂直翻转 
  async flip_image(){ 
    let pixelMap = await this.get_pixelmap() 
    pixelMap.flip(false, true); 
    this.imagePixelMap = pixelMap 
  } 
  
  // 对pixelMap进行透明度调整 
  async opacity_image(){ 
    let pixelMap = await this.get_pixelmap() 
    pixelMap.opacity(0.5); 
    this.imagePixelMap = pixelMap 
  } 
  
  build(){ 
    Column(){ 
      if(!this.edit){ 
        Row(){ 
          Image($r('app.media.icon')).objectFit(ImageFit.None) 
        }.width('100%').height('50%').backgroundColor('#F0F0F0') 
      }else{ 
        Row(){ 
          // 将编辑好的pixelMap传递给状态变量imagePixelMap后,通过Image组件进行渲染 
          Image(this.imagePixelMap).objectFit(ImageFit.None) 
        }.width('100%').height('50%').backgroundColor('#F0F0F0') 
      } 
           //换行,每一行子组件按照主轴方向排列     主轴对齐方式 lex主轴方向元素等间距布局 
      Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceEvenly}){ 
        this.buttonModel({textContent:'裁剪',action:this.crop_image()}) 
        this.buttonModel({textContent:'缩放',action:this.scale_image()}) 
        this.buttonModel({textContent:'偏移',action:this.translate_image()}) 
        this.buttonModel({textContent:'旋转',action:this.rotate_image()}) 
        this.buttonModel({textContent:'翻转',action:this.flip_image()}) 
        this.buttonModel({textContent:'透明度',action:this.opacity_image()}) 
        Button('还原') 
          .fontSize(14) 
          .height(30) 
          .width(60) 
          .borderRadius(10) 
          .margin({top:20}) 
          .backgroundColor('#A4AE77') 
          .onClick(()=>{ 
            this.edit = false 
          }) 
        Button("保存图片") 
          .onClick(() => { 
            this.savePixelMapToPng(); 
          }) 
      } 
      .margin({top:100}) 
      .height('100%') 
      .width('100%') 
  
  
    } 
    .height('100%') 
    .width('100%') 
  } 
  
  
  async savePixelMapToPng() { 
    let pixelMap =  await this.get_pixelmap(); 
    const uri: string = await savePixelMap(getContext(this), pixelMap); 
    console.log("png Uri is ======================"+uri); 
  }

适配版本信息

1. 本示例仅支持标准系统上运行,支持设备:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

2. 本示例为Stage模型,支持API version 10。

3. 本示例需要使用DevEco Studio 3.1    Release以上版本进行编译运行。

分享
微博
QQ
微信
回复
2024-05-22 17:56:02
相关问题
基于ImageKit图片进行处理
194浏览 • 1回复 待解决
如何图片进行高斯模糊处理
700浏览 • 1回复 待解决
如何用PixelMap处理图片
536浏览 • 1回复 待解决
基于PhotoViewPicker图片进行操作
188浏览 • 1回复 待解决
指定url图片进行下载保存
447浏览 • 1回复 待解决
如何相册图片进行编辑裁剪
728浏览 • 1回复 待解决
鸿蒙应用开发如何做图片适配?
842浏览 • 1回复 待解决
如何设置图片高斯模糊效果
1421浏览 • 3回复 待解决
如何实现图片大图预览效果
529浏览 • 1回复 待解决
如何将像素点保存到图片文件
1080浏览 • 1回复 待解决
图片模糊效果如何实现
346浏览 • 1回复 待解决
如何读取相册图片
200浏览 • 1回复 待解决
JS开发服务卡加载图片网络受阻
5115浏览 • 1回复 待解决