HarmonyOS 鸿蒙Next image.PixelMap裁剪始终裁剪不到框选的位置

这边写一个demo，可以参考修改一下，剪裁框只实现了左上和右下部分

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { picker } from '@kit.CoreFileKit';
import { fileIo } from '@kit.CoreFileKit';

@Entry
@Component
struct WebComponent {
@State pixelMap: PixelMap | undefined = undefined;
@State pixelMap1: PixelMap | undefined = undefined;
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

private settings1: RenderingContextSettings = new RenderingContextSettings(true)
private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings1)

getPicture() {
try {
let uris: Array<string> = [];
let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
uris = PhotoSelectResult.photoUris;
let file = fileIo.openSync(uris[0], fileIo.OpenMode.READ_ONLY);
console.info('file fd: ' + file.fd);
let buffer = new ArrayBuffer(4096);
let readLen = fileIo.readSync(file.fd, buffer);
console.info('readSync data to file succeed and buffer size is:' + readLen);
const imageSource: image.ImageSource = image.createImageSource(file.fd);
let decodingOptions: image.DecodingOptions = {
editable: true,
desiredPixelFormat: 3,
}
imageSource.createPixelMap(decodingOptions, (err: BusinessError, pixelMap: image.PixelMap) => {
if (err !== undefined) {
console.error(`Failed to create pixelMap.code is ${err.code},message is ${err.message}`);
} else {
this.pixelMap = pixelMap
this.context.drawImage(this.pixelMap,0,0,350,350)
console.info('Succeeded in creating pixelMap object.');
}
})
}).catch((err: BusinessError) => {
console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
} catch (error) {
let err: BusinessError = error as BusinessError;
console.error('photoPicker failed with err: ' + JSON.stringify(err));
}
}

@State xLocation:number = 350
@State yLocation:number = 350
@State leftTop:number = 0
@State RightTop:number = 0
@State leftBottom:number = 350
@State RightBottom:number = 350

build() {
Column() {
Stack(){
Canvas(this.context)
Canvas(this.context1)
.onReady(()=>{
this.context1.lineWidth = 6
this.context1.strokeRect(10, 10, 340, 340)
})
.onTouch(event => {
let x = event.touches[0].screenX
let y = event.touches[0].screenY
console.log('移动时leftTop '+this.leftTop)
console.log('移动时RightTop '+this.RightTop)
console.log('移动时leftBottom '+this.leftBottom)
console.log('移动时RightBottom '+this.RightBottom)
if (x>180&&y>180) {
this.xLocation = x
this.yLocation = y
this.context1.reset()
this.context1.lineWidth = 6
this.context1.strokeRect(0, 0, this.xLocation, this.yLocation)
this.leftTop = 0
this.RightTop = 0
this.leftBottom = this.xLocation
this.RightBottom = this.yLocation
}
else if (x<180&&y<180){
this.context1.reset()
this.context1.lineWidth = 6
this.leftTop = x
this.RightTop = y
this.leftBottom = this.xLocation
this.RightBottom = this.yLocation
this.context1.strokeRect(x, y, this.xLocation-x, this.yLocation-y)

}
})
}
.height('80%')
Row(){
Button('选择图片').onClick(() => {
this.getPicture()
})
.height(50)
Button('剪裁').onClick(()=>{
let pixelmap = this.context.getPixelMap(0, 0, 350, 350)
if (this.pixelMap != undefined) {
let height1 = Math.round(this.leftBottom-this.RightTop)
let width1 = Math.round(this.RightBottom-this.leftTop)
let region: image.Region = { x: vp2px(Math.round(this.leftTop)), y: vp2px(Math.round(this.RightTop)-1), size: { height: vp2px(height1), width: vp2px(width1) } };
if (pixelmap != undefined) {
pixelmap.crop(region, (err: BusinessError) => {
if (err) {
console.error(`Failed to scale pixelmap. code is ${err.code}, message is ${err.message}`);
return;
} else {
this.pixelMap1 = pixelmap
this.context.drawImage(this.pixelMap1,0,0,350,350)
console.info("Succeeded in scaling pixelmap.");
}
})
}
}
})
}
.width('100%')
.height('100%')
}
}

剪裁之前需要通过canvas重新获取一次pixelMap: let pixelmap = this.context.getPixelMap(0, 0, 350, 350)，使用此pixelMap来进行剪裁操作