Canvas to 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 */ 

Результат является тот же объект emprty. Пожалуйста, помогите мне решить эту проблему

Answer 1

Blob объекта type и size свойства не перечислимы, следовательно, JSON.stringify проигнорирует их значения и возвращать только строку, представляющую пустой объект: "{}".

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

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

Я думаю, что ваш блоб хорошо сформирован, вы можете отправить его, как это.