JavaScript Как получить ширину и высоту изображения из XMLHttpRequest

Question

Я перехожу к реализации запроса на межсайтовый запрос для изображения, преобразованного в базу 64 из Canvas в XMLHttpRequest и FileReader, чтобы его можно было использовать внутри веб-сайта работников. И я хочу знать, есть ли способ получить ширину и высоту изображения с самого начала.

Новая функция

var convertFileToDataURLviaFileReader = function (url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 

    // Our workaround for the Amazon CORS issue 
    // Replace HTTPs URL with HTTP 
    xhr.open('GET', url.replace(/^https:\/\//i, 'http://')); 
    xhr.send(); 
} 

Наш старый Функция

var convertImgToDataURLviaCanvas = function(url, callback, outputFormat) { 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function() { 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 

     var allInfo = { 
      data: dataURL, 
      width: this.width, 
      height: this.height 
     } 

     // Add height and width to callback 
     callback(allInfo); 
     canvas = null; 
    }; 

    // Our workaround for the Amazon CORS issue 
    // Replace HTTPs URL with HTTP 
    img.src = url.replace(/^https:\/\//i, 'http://'); 
} 

В старой функции я могу только получить высоту и ширину с холста, и я делаю это внутри из var allInfo. Есть ли эквивалент FileReader или какой-то способ получить ширину и высоту внутри новой функции?

Чтобы уточнить, я перехожу на XMLHttpRequest, потому что веб-рабочие не имеют доступа к DOM, поэтому Canvas не может использоваться.

Answer 1

Посмотри на этом коде, это просто быстрые переделки этого примера https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Является ли ваша reader.result строки в базе 64 кодирования?

<form> 
    <input type="file" onchange="previewFile()"><br> 
    <img src="" alt="Image preview..."><!-- height and width are not set --> 
    </form> 
    <script> 
    var previewFile =() => { 

     "use strict"; 

     let file = document.querySelector("input[type=file]").files[0]; 
     let fileReader = new FileReader(); 
     let preview = document.querySelector("img") 

     fileReader.addEventListener("load",() => { 
     preview.src = fileReader.result; 
     // here preview.height and preview.width are accessible 
     // if height and width are not set in the img element in the html 
     }); 

     if (file) { 
     fileReader.readAsDataURL(file); 
     } 
    }; 
    </script>