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深拷贝实现图片裁剪?
443浏览 • 1回复 待解决
HarmonyOS 图片裁剪问题
258浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS中如何通过PixelMap实现图片深拷贝后的裁剪和保存功能?
243浏览 • 0回复 待解决
HarmonyOS 容器裁剪的裁剪参数如何进行中心位置配置
354浏览 • 1回复 待解决
HarmonyOS 不规则形状裁剪
402浏览 • 1回复 待解决
HarmonyOS 裁剪报错:62980109
79浏览 • 1回复 待解决
HarmonyOS pixelMap
336浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
668浏览 • 1回复 待解决
HarmonyOS 如何进行图片裁剪
282浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
344浏览 • 1回复 待解决
图库裁剪能力,希望能够调用图库的图片裁剪能力
458浏览 • 1回复 待解决
HarmonyOS 相册,相机拍照并裁剪
418浏览 • 1回复 待解决
HarmonyOS 选择图片,裁剪的功能
468浏览 • 1回复 待解决
如何实现图片裁剪、旋转
906浏览 • 1回复 待解决
HarmonyOS SVG转换pixelMap
193浏览 • 1回复 待解决
HarmonyOS 图片怎么调用系统的裁剪功能?
414浏览 • 1回复 待解决
HarmonyOS image如何把图片裁剪成圆形
288浏览 • 1回复 待解决
HarmonyOS 选择相册图片需要进行裁剪作为用户头像,没有此api进行图片裁剪
255浏览 • 1回复 待解决
HarmonyOS PixelMap问题
152浏览 • 1回复 待解决
HarmonyOS pixelMap旋转
155浏览 • 1回复 待解决
HarmonyOS 图片浏览和裁剪的视图组件
262浏览 • 1回复 待解决
HarmonyOS 怎么对图片ArrayBuffer进行图片裁剪
607浏览 • 1回复 待解决
如何编辑裁剪相册中的图片
1086浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪的demo或者sdk
167浏览 • 1回复 待解决
HarmonyOS Pixelmap相关反馈
403浏览 • 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