HarmonyOS 从相册选取图片或者拍照,拿到图片进行缩放、压缩、裁剪操作

从相册选取图片或者拍照,拿到图片进行缩放、压缩、裁剪操作,一定是相册中的图片或者在相册中拍照拿到的图片!

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

可参考以下demo:

@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);
  }
分享
微博
QQ
微信
回复
1天前
相关问题
如何对相册图片进行编辑裁剪
1836浏览 • 1回复 待解决
如何编辑裁剪相册中的图片
608浏览 • 1回复 待解决
HarmonyOS 相册,相机拍照裁剪
134浏览 • 1回复 待解决
HarmonyOS 相册/拍照 压缩 上传demo
112浏览 • 1回复 待解决
HarmonyOS 图片资源选取
480浏览 • 1回复 待解决
HarmonyOS 关于相册中选择图片上传
87浏览 • 1回复 待解决
HarmonyOS 图片裁剪问题
26浏览 • 1回复 待解决