HarmonyOS【PixelMap】crop后,显示到Image控件中仍然未被截取
按照以下代码,点击添加照片按钮,期望显示一张被截取了一半的图片,但不管origin还是cropped,显示在Image中的都是完整而未被截取的图片。(后来试着多点几次添加同一张照片,有点时候能小概率(低于50%)显示两个Image均为截取后的图片)
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo, picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
@Entry
@Component
struct CropPage {
@State origin: PixelMap | undefined = undefined
@State cropped: PixelMap | undefined = undefined
private async decodeImage(uri: string) {
try {
let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
const imageSourceApi = image.createImageSource(file.fd)
imageSourceApi.getImageInfo(0, (error: BusinessError, imageInfo) => {
if (imageInfo == undefined) {
// log.e(error)
}
console.log(`imageInfo: ${JSON.stringify(imageInfo)}`)
})
return await imageSourceApi.createPixelMap()
} catch (error) {
// log.e(error)
return undefined
}
}
build() {
Column() {
Button('添加照片')
.onClick(async () => {
let uris = await selectPhoto({
MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
maxSelectNumber: 1,
isPhotoTakingSupported: false,
recommendationOptions: {
recommendationType: photoAccessHelper.RecommendationType.PROFILE_PICTURE,
}
})
if (uris.length == 0) {
return
}
this.origin = await this.decodeImage(uris[0])
if (this.origin) {
let info = await this.origin.getImageInfo()
this.origin.crop({
x: 0, y: 0,
size: {
width: info.size.width,
height: info.size.height / 2
}
})
this.cropped = this.origin
}
})
Image(this.origin)
.width('100%')
.height('100%')
.layoutWeight(1)
.objectFit(ImageFit.Contain)
Image(this.cropped)
.width('100%')
.height('100%')
.layoutWeight(1)
.objectFit(ImageFit.Contain)
}
.width(`100%`)
}
}
const PHOTO_DEFAULT_SELECT_NUMBER: number = 9; //数量
/**
* 通过选择模式拉起photoPicker界面,用户可以选择一个或多个图片/视频。
* @param options
* @returns
*/
async function selectPhoto(options?: PhotoSelectOptions): Promise<Array<string>> {
try {
if (!options) {
options = new PhotoSelectOptions();
}
if (!options.MIMEType) { //可选择的媒体文件类型,若无此参数,则默认为图片和视频类型。
options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
}
if (!options.maxSelectNumber) { //选择媒体文件数量的最大值,默认9
options.maxSelectNumber = PHOTO_DEFAULT_SELECT_NUMBER;
}
if (options.isPhotoTakingSupported == undefined) {
options.isPhotoTakingSupported = true; //支持拍照。
}
if (options.isEditSupported == undefined) {
options.isEditSupported = true; //支持编辑照片。
}
if (options.isSearchSupported == undefined) {
options.isSearchSupported = true; //支持编辑照片。
}
let photoSelectOptions: photoAccessHelper.PhotoSelectOptions = {
MIMEType: options.MIMEType,
maxSelectNumber: options.maxSelectNumber,
isPhotoTakingSupported: options.isPhotoTakingSupported,
isEditSupported: options.isEditSupported,
isSearchSupported: options.isSearchSupported,
recommendationOptions: options.recommendationOptions,
preselectedUris: options.preselectedUris
}
let photoPicker = new photoAccessHelper.PhotoViewPicker();
let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(photoSelectOptions)
if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
return photoSelectResult.photoUris
} else {
return [];
}
} catch (err) {
console.error(err)
return [];
}
}
class PhotoSelectOptions {
MIMEType?: photoAccessHelper.PhotoViewMIMETypes = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; //可选择的媒体文件类型,若无此参数,则默认为图片和视频类型。
maxSelectNumber?: number = PHOTO_DEFAULT_SELECT_NUMBER; //选择媒体文件数量的最大值(默认值为50,最大值为500)。
isPhotoTakingSupported?: boolean = true; //支持拍照。
isEditSupported?: boolean = true; //支持编辑照片。
isSearchSupported?: boolean = true; //支持搜索。
recommendationOptions?: photoAccessHelper.RecommendationOptions; //支持照片推荐。
preselectedUris?: Array<string>; //预选择图片的uri数据。
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS react-native-image-crop-picker引入后,找不到
533浏览 • 1回复 待解决
HarmonyOS Image组件显示PixelMap类型数据问题
489浏览 • 1回复 待解决
在 RelativeContainer 中使用 Panel,未被 Panel 覆盖的区域,仍然可以交互。
1047浏览 • 1回复 待解决
HarmonyOS 开源库image_crop,是否支持手动裁剪图片
854浏览 • 1回复 待解决
HarmonyOS gif图解码出来的pixelMap放到image组件中只显示静态图
606浏览 • 1回复 待解决
HarmonyOS react-native-image-crop-picker使用问题
433浏览 • 1回复 待解决
HarmonyOS 在使用Image图片组件时,放入pixelMap无法显示图片
821浏览 • 1回复 待解决
HarmonyOS 图片截取,怎么把图片中的红框截取出来显示。并且(ImageFit.Fill) 这样显示
535浏览 • 1回复 待解决
HarmonyOS 获取网络图片的PixelMap,如何进行center crop?
441浏览 • 1回复 待解决
HarmonyOS 用Image显示了网络图片,可以拿到Image组件用的图片的PixelMap吗
339浏览 • 1回复 待解决
HarmonyOS ObjectLink 修改类属性后build未被执行
577浏览 • 1回复 待解决
HarmonyOS OCR的结果uri如何转换为 image.PixelMap显示在页面上
532浏览 • 1回复 待解决
HarmonyOS 请问.png图片怎么在image控件中更改颜色
414浏览 • 1回复 待解决
HarmonyOS 保存PixelMap到相册,显示保存成功,相册中的图片为空白图片,宽高都是0
457浏览 • 1回复 待解决
HarmonyOS image.PixelMap的拉伸变形
404浏览 • 1回复 待解决
HarmonyOS 中调用camera拍照后得到图片[image.Image]问题?
338浏览 • 0回复 待解决
HarmonyOS wevSrc中带有中文无法跳转,使用encodeURI后仍然无法跳转
352浏览 • 1回复 待解决
HarmonyOS 自定义组件中,Image 控件无法更新图片
1041浏览 • 1回复 待解决
HarmonyOS 自定义弹窗中跳转页面,弹窗仍然显示在页面之上
674浏览 • 1回复 待解决
HarmonyOS 如何使用image.createPixelMaph创建PixelMap
324浏览 • 1回复 待解决
HarmonyOS image.PixelMap保存到 相册问题
473浏览 • 1回复 待解决
如何将PixelMap的数据存储到数据库中
2272浏览 • 1回复 待解决
HarmonyOS 图片文件写入成功,但在Image中不显示
447浏览 • 1回复 待解决
HarmonyOS 相机拍照获得的 image 如何转成PixelMap?
454浏览 • 1回复 待解决
展示的就是同一张图片。参考以下demo: