HarmonyOS PixelMap裁剪
想对PixelMap进行裁剪,直接调用其crop方法固然可以,但是这会在原PixelMap上操作,想要的是生成一个全新的PixelMap对象。
已实现有2种方案:
方案一:先复制PixelMap,在PixelMap副本上调用crop:
// 复制PixelMap方法
export async function copyPixelMap(pixelMap: PixelMap) {
  const imageInfo: image.ImageInfo = await pixelMap.getImageInfo()
  const buffer: ArrayBuffer = new ArrayBuffer(pixelMap.getPixelBytesNumber())
  await pixelMap.readPixelsToBuffer(buffer)
  const initOpts: image.InitializationOptions = {
    editable: true,
    pixelFormat: image.PixelMapFormat.RGBA_8888,
    size: {
      width: imageInfo.size.width,
      height: imageInfo.size.height
    }
  }
  return await image.createPixelMap(buffer, initOpts)
}
// 裁剪PixelMap方法
export async function cropPixelMap(pixelMap: PixelMap, x: number, y: number, width: number, height: number) {
  // 复制原图
  const tmp: PixelMap = await copyPixelMap(pixelMap)
  // 裁剪区域
  const regin: image.Region = {
    x: x,
    y: y,
    size: {
      width: width,
      height: height,
    }
  }
  await tmp.crop(regin)
  return tmp
}
此方法存在如下弊端:
- 将原图多复制了一份,内存占用稍多了一些。
 - 属于取巧的方法,调用副本PixelMap的crop方法,并不是直接的裁剪图片,有点绕弯子。
 - 可能PixelMapFormat设置有问题,裁剪得到的图片偏蓝色,像是被加了滤镜。这个方案,如何使得得到的裁剪图颜色正常?
 
方案二:先通过readPixels(area: PositionArea)读取待裁剪区域像素数据,再调用image.createPixelMap生成PixelMap:
export async function cropPixelMap(pixelMap: PixelMap, x: number, y: number, width: number, height: number) {
  const area: image.PositionArea ={
    pixels: new ArrayBuffer(pixelMap.getPixelBytesNumber()),
    offset: 0,
    stride: pixelMap.getBytesNumberPerRow(),
    region: {
      x: x,
      y: y,
      size: {
        width: width,
        height: height
      }
    }
  }
  await pixelMap.readPixels(area)
  const initOpt:image.InitializationOptions = {
    editable: true,
    pixelFormat: image.PixelMapFormat.RGBA_8888,
    size: {
      width: width,
      height: height
    }
  }
  return await image.createPixelMap(area.pixels, initOpt)
}
此方法存在如下问题:
- PositionArea 内的参数设定应该有问题,如何设定。
 - 裁剪得到的图片是乱码。这个方案,如何正确设定PositionArea的参数以得到正确的裁剪图?
 
这个方案,如何正确设定PositionArea的参数以得到正确的裁剪图?
        HarmonyOS
      
        赞
        
 收藏 0
 回答 1
 
        待解决
        
相关问题
 #鸿蒙通关秘籍#如何使用PixelMap深拷贝实现图片裁剪? 
1239浏览  • 1回复 待解决
HarmonyOS 图片裁剪问题 
1273浏览  • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS中如何通过PixelMap实现图片深拷贝后的裁剪和保存功能? 
957浏览  • 0回复 待解决
HarmonyOS 不规则形状裁剪 
1019浏览  • 1回复 待解决
HarmonyOS 裁剪报错:62980109 
793浏览  • 1回复 待解决
HarmonyOS 容器裁剪的裁剪参数如何进行中心位置配置 
1225浏览  • 1回复 待解决
HarmonyOS pixelMap 
1052浏览  • 1回复 待解决
HarmonyOS  图像裁剪的demo 
1370浏览  • 1回复 待解决
HarmonyOS  有没有图片裁剪控件? 
1164浏览  • 1回复 待解决
HarmonyOS 如何进行图片裁剪 
1813浏览  • 1回复 待解决
图库裁剪能力,希望能够调用图库的图片裁剪能力 
1039浏览  • 1回复 待解决
HarmonyOS 相册,相机拍照并裁剪 
1705浏览  • 1回复 待解决
HarmonyOS 选择图片,裁剪的功能 
1585浏览  • 1回复 待解决
HarmonyOS SVG转换pixelMap 
1056浏览  • 1回复 待解决
如何实现图片裁剪、旋转 
1979浏览  • 1回复 待解决
HarmonyOS image如何把图片裁剪成圆形 
906浏览  • 1回复 待解决
HarmonyOS  图片怎么调用系统的裁剪功能? 
1732浏览  • 1回复 待解决
鸿蒙如何对组件进行裁剪 
581浏览  • 2回复 待解决
HarmonyOS PixelMap问题 
986浏览  • 1回复 待解决
HarmonyOS pixelMap旋转 
881浏览  • 1回复 待解决
HarmonyOS 选择相册图片需要进行裁剪作为用户头像,没有此api进行图片裁剪 
974浏览  • 2回复 待解决
HarmonyOS Pixelmap相关反馈 
1347浏览  • 1回复 待解决
HarmonyOS 怎么对图片ArrayBuffer进行图片裁剪 
1339浏览  • 1回复 待解决
HarmonyOS 图片浏览和裁剪的视图组件 
960浏览  • 1回复 待解决
HarmonyOS 有没有图片裁剪的demo或者sdk 
1041浏览  • 1回复 待解决





















方案一:首先,copy前先确认下源pixelmap的格式:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#ZH-CN_TOPIC_0000001884758670__getimageinfosync12
方法1:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#initializationoptions8
方法2:readpixelmaptobuffer拿到的BGRA_8888,可以抽个方法把[[b,g,r,a]…] 转换成[[r,g,b,a]…]。
方案二 :readPixels参数设置参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sendableimage-V5#readpixels
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#positionarea7
图片剪裁可以参考完整demo,地址如下:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-ImageEdit