我正在尝试使用React-Native-Camera来捕获图像并将其上传到服务器,捕获的响应仅提供base64图像和系统缓存的相对uri路径。我曾经使用blob-util之类的软件包在网站中将图像转换为斑点,但不适用于React-native。
当我四处寻找时,我发现大多数人都将base64字符串直接上传到服务器,但是我找不到关于blob的任何信息,如何从base64图像字符串中获取blob?
答案 0 :(得分:0)
我的项目中有一个函数可以将图像转换为斑点。这里是。第一项功能是处理相机。第二功能是创建一个Blob和一个图像名称。
addPicture = () => {
ImagePicker.showImagePicker({ title: "Pick an Image", maxWidth: 800, maxHeight: 600 }, res => {
if (res.didCancel) {
console.log("User cancelled!");
} else if (res.error) {
console.log("Error", res.error);
} else {
this.updateProfilePicture(res.uri)
}
});
}
此addPicture
用于启动图像选择器。在上面的函数中,res
表示来自showImagePicker
的输出。我必须将结果(uri
)的res.uri
传递给下面的函数,以便创建Blob文件
在下面的函数中,我想用userId命名图像。您可以使用任何喜欢的东西。
updateProfilePicture = async (uri) => {
var that = this;
var userId = this.state.user.uid
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(uri)[1];
this.setState({
currentFileType: ext
});
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', uri, true);
xhr.send(null);
});
var filePath = userId + '.' + that.state.currentFileType;
}
上述功能中还有一些其他代码,用于将图像上载到Firebase存储中。我没有包含这些代码。