Image 从react native expo上传的图像太大,质量太差
我正在开发一个应用程序,员工应该能够上传网站产品目录的图片。应用程序是用expo react native构建的,相机库是Image 从react native expo上传的图像太大,质量太差,image,react-native,compression,expo,resolution,Image,React Native,Compression,Expo,Resolution,我正在开发一个应用程序,员工应该能够上传网站产品目录的图片。应用程序是用expo react native构建的,相机库是ImagePicker,用于压缩和调整大小的库是ImageManipulator 在查看一些同时显示产品目录的网站时,我看到的图像约为500x300,即使放大200%,文件大小约为40kb,也显得清晰。我使用iphone XR进行测试,它的摄像头在4032x3024中拍摄图像,当我将其调整为与500x300类似的大小时,即使没有压缩,它看起来也很可怕,压缩后的文件大小超过25
ImagePicker
,用于压缩和调整大小的库是ImageManipulator
在查看一些同时显示产品目录的网站时,我看到的图像约为500x300
,即使放大200%,文件大小约为40kb
,也显得清晰。我使用iphone XR进行测试,它的摄像头在4032x3024
中拍摄图像,当我将其调整为与500x300
类似的大小时,即使没有压缩,它看起来也很可怕,压缩后的文件大小超过250kb
这可能是由于大分辨率缩放、糟糕的压缩,还是我完全遗漏了什么
我们根据图像的分辨率将图像上传到三个独立的AWS存储桶。(用于代码上下文)
导出默认值({takePictureCb,clothingId})=>{
const dispatch=usedpatch();
const{toast}=useToost();
常量质量=使用选择器(选择质量);
const launchCamera=async()=>{
const image=wait ImagePicker.launchCameraAsync({
方面:[1,1],
允许编辑:true
});
如果(image.cancelled==true){
返回;
}
调度(设置加载(真));
const resizedImages=wait getResizedImages(图[720500300]);
Promise.all(resizedImages.map(resizedImage=>sendImage(resizedImage)))
.然后(()=>{
吐司({
消息:`图像已上载',
…成功的支柱
});
})
.catch(错误=>{
控制台错误(error);
吐司({
信息:“出了点问题!”,
…错误道具
});
})
.最后(()=>{
调度(设置加载(假));
调度(除去衣服(衣物ID));
takebeb();
});
};
const getResizedImages=async(图像,像素:number[])=>{
const promises=pixels.map(pixels=>
ImageManipular.manipleAsync(image.uri[
{调整大小:{高度:像素,宽度:像素},压缩:质量}
])
);
返回承诺。全部(承诺);
};
const sendImage=异步映像=>{
等待上传图像(clothingId,image.uri);
};
返回;
};