javascript - Canvas 到 blob 返回空 blob 对象

Question

我正在尝试将 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 */

结果是相同的空对象。请帮我解决这个问题

Answer 1

Blob 对象的 type 和 size 属性是不可枚举的，因此，JSON.stringify 将忽略它们的值并仅返回表示空对象:“{}”。

var blob = new Blob(['hello world'], {type:'text/plain'});

console.log(JSON.stringify(blob));
console.log(blob);

我猜你的 blob 格式正确，你可以这样发送。