我正在尝试将 Canvas 元素图像转换为 blob。我已经使用 canvas-to-blob.min.js 尝试了下面的代码,它返回一个空对象。但是当转换为数据 URL 时它不是空的。
var file = getFile();
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.height = height;
canvas.width = width;
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,width,height);
var data_URL = canvas.toDataURL('image/png'); /* Returns correct data URL */
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
console.log(JSON.stringify(blob)) /* Return empty */
var formData = new FormData();
formData.append('file', blob, fileName);
/* ... */
},
'image/jpeg'
);
}
}
img.src = this.result;
}
reader.readAsDataURL(file);
我也试过像这样的 dataURIToBlob() 自定义函数(函数不包括在这里)
var data_URL = canvas.toDataURL('image/png');
var blob = dataURIToBlob(data_URL);
console,log(JSON.stringify(blob)) /* returns empty object */
结果是相同的空对象。请帮我解决这个问题
最佳答案
Blob 对象的 type
和 size
属性是不可枚举的,因此,JSON.stringify
将忽略它们的值并仅返回表示空对象:“{}”
。
var blob = new Blob(['hello world'], {type:'text/plain'});
console.log(JSON.stringify(blob));
console.log(blob);
我猜你的 blob 格式正确,你可以这样发送。
关于javascript - Canvas 到 blob 返回空 blob 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38821823/