（set！（.-onload image）（fn []））不起作用

Question

我有以下代码将一些图像作为输入，然后使用compress-omg函数对其进行压缩，该函数获取按顺序输入的每个图像的数据URL，并将压缩后的blob存储在db向量中：images

(defn image-selector []
  [:<>
   ;; appending image in this div
   [:div {:id "test-div"}]
   [:input {:type "file"
                     :multiple true
                     :id "input-image"
                     :on-change
                     (fn [e]
                         (let [files (array-seq (.. e -target -files))]
                           (doseq [file files]
                             ;; must create a new file-reader in each iteration
                             (let [file-reader (js/FileReader.)]
                               (set! (.-onload file-reader)
                                 (fn [e]
                                   (let [data-url (-> e .-target .-result)]
                                     (dispatch [:images (compress-img data-url)]))))
                               (.readAsDataURL file-reader file)))))}]])


(defn compress-img [data-url]
  "takes data-url. Compresses it and returns a blob."
  (let [image (js/Image.)
        canvas (js/document.createElement "canvas")
        ctx (.getContext canvas "2d")
        blob (js/Blob. [data-url])
        window-url (or (-> js/window .-URL) (-> js/window .-webkitURL ))
        blob-url (.createObjectURL window-url blob)
        ]
    (set! (.-onload image)
;; doesn't print 
          (fn [_]

            (prn "image height" (.-height image))
            (prn "image width " (.-width image))
            (set! (.-src image) blob-url)

            (.appendChild (js/document.getElementById "test-div") image)


            (.drawImage ctx image 0 0 (.-width image) (.-height image))
            ;; approximating sizes of compressed and uncompressed images
            (prn "size original (MB)" (* 0.75 0.000001 (.-length data-url)))
            (prn "size upload (MB)" (* 0.75 0.000001 (.-length (.toDataURL canvas "image/png" 0.1))))
            ;; compressing and returning the blob
            (js/Blob. [(.toDataURL canvas "image/png" 0.1)])
            )

          )
    (set! (.-onerror image)
;; doesn't print
          (fn [e]
            (prn "error is " e)
            (prn "error")))
   ))

但是从不触发onload和onerror事件。我在做什么错？

Answer 1

为了触发onload上的onerror或Image，首先需要(set! (.-src img) data-url)。

---

由于您正在尝试调整数据URL的大小，因此我们在代码库中执行以下操作：

(defn clamp [^js image width heigth]
  (let [img-width  (.-width image)
        img-height (.-height image)
        ratio      (/ img-width img-height)
        portrait?  (< img-width img-height)
        w          (if (< img-width width)
                     img-width
                     (if portrait?
                       width
                       (* width ratio)))
        h          (if (< img-height heigth)
                     img-height
                     (if portrait?
                       (/ heigth ratio)
                       heigth))]
    [w h]))

(defn resize! [image width height callback]
  (let [canvas (.createElement js/document "canvas")
        ctx    (.getContext canvas "2d")
        [w h]  (clamp image width height)]
    (set! (.-width canvas) w)
    (set! (.-height canvas) h)
    (.drawImage ctx image 0 0 w h)
    (callback (.toDataURL canvas))))

(defn resize-data-url! [uri width height callback]
  (let [img (.createElement js/document "img")]
    (set! (.-onload img) (fn [] (this-as image
                                  (resize! image width height callback))))
    (set! (.-src img) uri)
    nil))

(defn with-image-data
  "Asynchronously load an image `file` in a FileReader, then call the `callback`
  fn with the FileReader's result and a DOM Image intance. Usefull to get the
  image content as a DataUrl, image width and height. If the file is not an
  image, call `callback` with nil arguments."
  [file callback]
  (if-not (= (files/type file) :file.type/image)
    (callback nil nil)
    (let [reader (js/FileReader.)
          img    (js/Image.)]
      (set! (.-onload reader) #(set! (.-src img) (.-result reader)))
      (set! (.-onerror reader) #(taoensso.timbre/error %))
      (set! (.-onload img) (fn [_]
                             (resize-data-url! (.-result reader) 300 300
                                               (fn [url]
                                                 (callback url img)))))
      (.readAsDataURL reader file)
      nil)))

Answer 2

在您的代码示例中，(set! (.-src image) blob-url)滑入了onload事件处理程序本身。

您必须在该函数之外调用该函数才能真正开始加载图像，以便它可以正确触发onload。

类似

(set! (.-src image) blob-url)
(set! (.-onload image)
  (fn [_]
    (prn "image height" (.-height image))
    (prn "image width " (.-width image))

    (.appendChild (js/document.getElementById "test-div") image)

    (.drawImage ctx image 0 0 (.-width image) (.-height image))
    ;; approximating sizes of compressed and uncompressed images
    (prn "size original (MB)" (* 0.75 0.000001 (.-length data-url)))
    (prn "size upload (MB)" (* 0.75 0.000001 (.-length (.toDataURL canvas "image/png" 0.1))))
    ;; compressing and returning the blob
    (js/Blob. [(.toDataURL canvas "image/png" 0.1)])
    ))