JavaScript 如何从 XMLHttpRequest 获取图像宽度和高度

Question

我正在将转换为 Base 64 的图像的跨站点请求的实现从 Canvas 切换到 XMLHttpRequest 和 FileReader，以便它可以在 Web Worker 内部使用。我想知道是否有办法从一开始就获取图像的宽度和高度。

新功能

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://');
}

在旧函数中，我可以使用 Canvas 获取高度和宽度，并且是在 var allInfo 内部执行此操作。是否有 FileReader 的等效项或某种方法来获取新函数内部的宽度和高度？

为了澄清，我将切换到 XMLHttpRequest 因为 Web Workers 无权访问 DOM，因此无法使用 Canvas。

Answer 1

看看这段代码，它只是这个示例的快速修改 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

您的 reader.result 是 Base 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>