Нулевой размер изображения, когда sr c 'd как URL-адрес blob, но не когда sr c' d как URL-адрес данных - PullRequest
Новая
       34

Нулевой размер изображения, когда sr c 'd как URL-адрес blob, но не когда sr c' d как URL-адрес данных

0 голосов
/ 06 марта 2020

У меня есть блоб изображения, для которого требуется высота и ширина, поэтому я создаю URL-адрес блоба, устанавливаю для него значение sr c объекта изображения, а затем получаю высоту и ширину объекта изображения. 

(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-объекта равны нулю, если соответствующий URL-адрес данных отображается в документе?

Ответы [ 3 ]

0 голосов
/ 06 марта 2020

Я почти уверен, что вы можете получить height/width только после того, как изображение было «загружено», поэтому вам нужно подключить обработчик событий onload. Использование BLOB-URL-адреса не меняет это ограничение.

Возможно, что-то подобное, хотя я не проверял это. 

(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))
0 голосов
/ 06 марта 2020

Вот как мы это делаем в нашей кодовой базе. Как отметил Томас Хеллер, вам нужно загрузить изображение, чтобы получить правильные метаданные изображения. 

(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))
0 голосов
/ 06 марта 2020

Попробуйте вместо этого отобразить свойства naturalWidth и naturalHeight изображения: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image#Usage_note

...