[英]Taking an image and converting it into BLOB for MySQL
I am trying to make a JavaScript that would take an image file and covert it into BLOB (by converting the file into Base64 first and then into BLOB), my project doesn't have a support for toBlob() so I have found different convering steps and put them together and they work to a point where I have to pass the BLOB from the function where its made out for the Mysql part of code that takes care of communicating with the database.我正在尝试制作一个 JavaScript 来获取图像文件并将其转换为 BLOB(通过先将文件转换为 Base64 然后再转换为 BLOB),我的项目不支持 toBlob() 所以我发现了不同的转换步骤并将它们放在一起,它们工作到我必须从 function 传递 BLOB 的地步,它为 Mysql 部分代码制作,负责与数据库通信。 (I have that fully working). (我有充分的工作)。 Now I only need to find a way how to connect them through a variable that saves the results of the imageforQuery
function.现在我只需要找到一种方法,如何通过一个变量来连接它们,该变量保存了imageforQuery
function 的结果。
My code so far is this:到目前为止,我的代码是这样的:
let base64String = "";
function imageforQuery(imageid) {
//takes file and converts to Base64
var file = document.getElementById(imageid).files[0];
var reader = new FileReader();
console.log("next");
imgFileFrontBlob = "";
reader.onload = function () {
base64String = reader.result.replace("data:", "")
.replace(/^.+,/, "");
// console.log(base64String);
base64String = 'data:image/jpeg;base64,'+ base64String;
console.log(base64String);
//converts Base64 into BLOB
var binary = atob(base64String.split(',')[1]);
console.log(binary);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
var imgFileFrontBlob = new Blob([new Uint8Array(array)], {type: 'image/png'});
console.log(imgFileFrontBlob);
return imgFileFrontBlob
}
reader.readAsDataURL(file);
};
by experimenting with console.log()
at different stages and return
I have found out that I can't pass the converted BLOB result out, as the function imageforQuery()
only returns what is after reader.readAsDataURL(file);
通过在不同阶段尝试console.log()
并return
,我发现我无法将转换后的 BLOB 结果传递出去,因为 function imageforQuery()
只返回reader.readAsDataURL(file);
之后的内容。 and I don't know of a way of getting that result out.而且我不知道有什么方法可以得出这个结果。
You can wrap the FileReader
instance and calls inside of a Promise
.您可以包装FileReader
实例并在Promise
内调用。 Return the Promise
immediately.立即退回Promise
。 In the reader.onload
function call resolve()
to exit the Promise
with a value.在reader.onload
function 调用resolve()
以退出Promise
并带有值。
function imageforQuery(imageid) {
return new Promise(resolve => {
var file = document.getElementById(imageid).files[0];
var reader = new FileReader();
reader.onload = function () {
let base64String = reader.result.replace("data:", "").replace(/^.+,/, "");
base64String = "data:image/jpeg;base64," + base64String;
var binary = atob(base64String.split(",")[1]);
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
var imgFileFrontBlob = new Blob([new Uint8Array(array)], {
type: "image/png",
});
resolve(imgFileFrontBlob);
};
reader.readAsDataURL(file);
});
}
This results in being able to use your function like here below.这导致能够使用您的 function,如下所示。 imageforQuery
is called, returns a Promise
. imageforQuery
被调用,返回一个Promise
。 When the promise is finished (meaning resolve
is called) the function in the then
method will run.当 promise 完成时(意味着调用了resolve
), then
方法中的 function 将运行。
imageforQuery(imageId).then(blob => {
// Use your blob here.
});
Base64 is simply ascii text. Base64 只是简单的 ascii 文本。 So MySQL's datatype BLOB
or TEXT
would work.所以 MySQL 的数据类型BLOB
或TEXT
可以工作。 That is, after converting to Base64, don't worry about "convert to blob";即转换为Base64后,不用担心“转换为blob”; it is not necessary.没有必要。
That is, you can probably replace the code from //converts...
through return...
by simply也就是说,您可以简单地替换//converts...
到return...
中的代码
return base64String;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.