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
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
此方法存在如下弊端:
- 将原图多复制了一份,内存占用稍多了一些。
- 属于取巧的方法,调用副本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)
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
此方法存在如下问题:
- PositionArea 内的参数设定应该有问题,如何设定。
- 裁剪得到的图片是乱码。这个方案,如何正确设定PositionArea的参数以得到正确的裁剪图?
这个方案,如何正确设定PositionArea的参数以得到正确的裁剪图?
HarmonyOS
赞
收藏 0
回答 1
相关问题
#鸿蒙通关秘籍#如何使用PixelMap深拷贝实现图片裁剪?
794浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS中如何通过PixelMap实现图片深拷贝后的裁剪和保存功能?
623浏览 • 0回复 待解决
HarmonyOS 图片裁剪问题
684浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
1081浏览 • 1回复 待解决
HarmonyOS pixelMap
752浏览 • 1回复 待解决
HarmonyOS 不规则形状裁剪
711浏览 • 1回复 待解决
HarmonyOS 裁剪报错:62980109
378浏览 • 1回复 待解决
HarmonyOS 容器裁剪的裁剪参数如何进行中心位置配置
863浏览 • 1回复 待解决
图库裁剪能力,希望能够调用图库的图片裁剪能力
723浏览 • 1回复 待解决
HarmonyOS 选择图片,裁剪的功能
919浏览 • 1回复 待解决
HarmonyOS 相册,相机拍照并裁剪
843浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
757浏览 • 1回复 待解决
HarmonyOS 如何进行图片裁剪
892浏览 • 1回复 待解决
如何实现图片裁剪、旋转
1385浏览 • 1回复 待解决
HarmonyOS SVG转换pixelMap
654浏览 • 1回复 待解决
HarmonyOS PixelMap问题
642浏览 • 1回复 待解决
HarmonyOS pixelMap旋转
559浏览 • 1回复 待解决
HarmonyOS 选择相册图片需要进行裁剪作为用户头像,没有此api进行图片裁剪
618浏览 • 2回复 待解决
HarmonyOS 图片浏览和裁剪的视图组件
594浏览 • 1回复 待解决
HarmonyOS 怎么对图片ArrayBuffer进行图片裁剪
983浏览 • 1回复 待解决
HarmonyOS image如何把图片裁剪成圆形
584浏览 • 1回复 待解决
HarmonyOS 图片怎么调用系统的裁剪功能?
888浏览 • 1回复 待解决
HarmonyOS Pixelmap相关反馈
901浏览 • 1回复 待解决
HarmonyOS PixelMap加载图片
719浏览 • 1回复 待解决
HarmonyOS pixelMap转成ArrayBuffer
1200浏览 • 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