将src用作blob-url时图像大小为零，但当src用作data-url时图像大小为零

Question

我有一个想要高度和宽度的图像Blob，因此我创建了一个Blob URL，将图像对象的src设置为其，然后获取图像对象的高度和宽度。

(let [window-url (or (-> js/window .-URL)
                       (-> js/window .-webkitURL))
        blob-url (window-url.createObjectURL blob)
        image (js/Image.)]
    (set! (.-src image) blob-url)
    (prn "image height" (.-height image))
    (prn "image width " (.-width image))
      )

但是我得到的结果是：

图像高度0图片宽度0

但是很明显，图像的高度和宽度不为0，我已经通过通过其数据URL在文档上显示图像来验证了高度和宽度（然后将其转换为上述(js/Blob. [data-url])之类的Blob）。那么，如果相应的data-url确实显示在文档中，为什么blob的高度和宽度为零？

Answer 1

Answer 2

可能是类似的东西，但是我没有测试。

(let [window-url (or (-> js/window .-URL)
                     (-> js/window .-webkitURL))
      blob-url (.createObjectURL window-url blob)
      image (js/Image.)]
  (set! (.-onload image)
    (fn [e]
      (prn "image height" (.-height image))
      (prn "image width " (.-width image))))
  (set! (.-src image) blob-url))

Answer 3

(defn with-image-data
  "Asynchronously load an image `file` in a FileReader, then call the `callback`
  fn with a proper Image object"
  [file callback]
  (let [reader (js/FileReader.)
        img    (js/Image.)]
    (set! (.-onload reader) #(set! (.-src img) (.-result reader)))
    (set! (.-onerror reader) #(js/console.error %))
    (set! (.-onload img) (fn [_] (callback img)))
    (.readAsDataURL reader file)
    nil))