一、react-native-image-crop-picker官方链接
二、简述react-native-image-crop-picker 的常用API即属性
//调用系统相册选择图片
ImagePicker.openPicker({
width: 300, //设定上传图片的宽度(一般在移动端除非产品设计了图片必须什么宽高,否则会经常不兼容)
height: 400, //设定上传图片的高度
cropping: true, //是否可以剪切
multiple: true, //是否支持多选
cropperChooseText: '确定', //右下角选中按钮可以用中文描述
cropperCancelText: '取消', //右下角取消按钮可以用中文描述
compressImageQuality: 0.2,//压缩图像的质量(从0到1,1是最好的质量)。在iOS上,大于0.8的值不会在大多数图像中产生明显的质量提升,而0.8的值会比1的值减少一半或更少的文件大小
includeBase64: true,// 当设置为true时,图像文件内容将作为base64编码的字符串在data属性中可用。提示:要使用这个字符串作为图像源
}).then(image => {
console.log(image);
});
//调用相机拍照
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
console.log(image);
});
三、附上项目截图:支持拍照和上传图片
四、项目部分代码片段
import ImagePicker from 'react-native-image-crop-picker';
// 调用系统相册选择图片
openImagePicker = async () => {
const { imgList } = this.state;
if (imgList.length && imgList.length >= 60) {
return Toast.info('最多上传60张图片!');
}
const uploadresult = await ImagePicker.openPicker({
cropperChooseText: '确定',
cropperCancelText: '取消',
multiple: true, //可多选
cropping: false, //不可剪切
// includeBase64: true,
compressImageQuality: 0.2, //照片压缩比例:0.2
});
//上传本地图片多张后,进行遍历
uploadresult.forEach(async ii => {
//ii.size / (1024 * 1024) + 'MB' 每张照片尺寸为多少MB
//ii.width 每张图片的宽度
//ii.height 每张图片的高度
//ii.modificationDate 每张图片的日期,例: 1611400769000,时间戳毫秒转换成 2021-01-23 19:19:29 官方链接:https://tool.lu/timestamp/
//例: size:0.03307628631591797MB ,width:1440 ,height:810
console.log(ii.size / (1024 * 1024) + 'MB',',width:' + ii.width,',height:' + ii.height);
//${Math.round(Math.random() * 1000000000000)} 拼接随机序列,保证每张图片的唯一性
const fileName = `${ii.modificationDate}${Math.round(Math.random() * 1000000000000)}`;
console.log(ii.modificationDate);
this.uploadImage2Oss(fileName,ii.path);
});
}
//调用相机拍照
openCamera = async () => {
const cameraImage = await ImagePicker.openCamera({
cropperChooseText: '确定',
cropperCancelText: '取消',
cropping: false,
multiple: true,
// includeBase64: true,
compressImageQuality: 0.2,
});
console.log(cameraImage.size / (1024 * 1024) + 'MB',',width:' + cameraImage.width,',height:' + cameraImage.height);
const fileName = `${cameraImage.modificationDate}${Math.round(Math.random() * 1000000000000)}`;
console.log(fileName);
this.uploadImage2Oss(fileName,cameraImage.path);
}
// 上传图片到oss 客户端直传模式
uploadImage2Oss= async (fileName,localFilePath) => {
const restoken = await ResourceTokenServicegetToken({
fileName: fileName,
});
const { codeInfo, uploadToken = {} } = restoken;
if (codeInfo && codeInfo.code === 0) {
const { resId, endpoint, params } = uploadToken;
console.log('resId',resId);
console.log('endpoint',endpoint);
console.log('params',params);
const pat = JSON.parse(params);
const data = new FormData(); //创建一个formData对象实例的方式,通过append方法添加数据
for (const i in pat) {
data.append(`${i}`, pat[i]);
}
data.append('resId', resId);
const file = {
uri: localFilePath,resId,...pat, type: 'multipart/form-data', name: fileName,
};
data.append('file', file);
const uploadresult = await fetch(endpoint,{
method: 'POST',
body: data,
});
// eslint-disable-next-line eqeqeq
if (uploadresult && uploadresult.status == 200) {
// 从服务端获取上传图片地址
const imgurl = await generateUrls({ resId: resId });
// eslint-disable-next-line eqeqeq
if (imgurl && imgurl.codeInfo.code == 0) {
const { imgList, previewImageList } = this.state;
const lists = imgList;
const lists1 = previewImageList;
this.setState({
imgList: [...lists, imgurl.url], //imgList:图片集合,远程cdn 地址,添加最新上传的imgurl.url
previewImageList: [...lists1, localFilePath], //previewImageList:预览图片集合,预览图片是本地的
});
}
}
}
}