2

我想在裁剪前放大或缩小图像。我正在使用cropperjs。我正在通过以下代码尝试此操作。

(def Cropper (oget js/window "Cropper"))

(defn zoom-in [cropper-inst]
  (when cropper-inst
    (ocall cropper-inst "zoom" 0.1)))

(defn zoom-out [cropper-inst]
  (when cropper-inst
  (ocall cropper-inst "zoom" "-0.1")))

(defn mount-listeners [cropper]
  (let [zoom-in-el (ocall js/window "document.getElementById" "zoom-in-el")
          zoom-out-el (ocall js/window "document.getElementById" "zoom-out-el")
          cropper-el (-> cropper .-target)] 
      (ocall zoom-in-el "addEventListener" "click" (zoom-in cropper-el))))

(defn mount-cropper [wrap]
  (when wrap
    (when-let [image (oget wrap "firstChild")]
      (let [cropper (Cropper. image #js{:aspectRatio 1
                                        :viewMode 0
                                        :guides false
                                        :rotatable false
                                        :zoomable true
                                        :ready mount-listeners})]
        cropper))))

我将裁剪器安装在渲染上。但是，我不能调用缩放方法。它显示错误消息“糟糕，缺少预期的对象键'zoom'”。

当我将缩放称为 (ocall cropper-inst "cropper" "zoom" 0.1) 时，错误消息是"Oops, Expected a function on key path 'cropper', got instead"。

事件对象如下图所示： 在此处输入图像描述 但是，crpper-el 是一个 HTML 标记，有<img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="spots_ui_components_cropper--cropped-image27970 spots_ui_components_cropper--cropped-image cropper-hidden"> 什么想法吗？

4

1 回答 1

2

我终于成功了。我使用了 (.-cropper (js-this))并在放大方法调用之前添加了一个# 。这是正确的代码：

(def Cropper (oget js/window "Cropper"))

(defn zoom-in [cropper-inst]
  (when cropper-inst    
    (ocall cropper-inst "zoom" 0.1)))

(defn zoom-out [cropper-inst]
  (when cropper-inst
  (ocall cropper-inst "zoom" "-0.1")))

(defn mount-listeners [cropper]
  (let [zoom-in-el (ocall js/window "document.getElementById" "zoom-in-el")
          zoom-out-el (ocall js/window "document.getElementById" "zoom-out-el")
          cropper-this (.-cropper (js-this))]
      (ocall zoom-in-el "addEventListener" "click" #(zoom-in cropper-this))
      (ocall zoom-out-el "addEventListener" "click" #(zoom-out cropper-this))))

(defn mount-cropper [wrap]
  (when wrap
    (when-let [image (oget wrap "firstChild")]
      (let [cropper (Cropper. image #js{:aspectRatio 1
                                        :viewMode 0
                                        :guides false
                                        :rotatable false
                                        :zoomable true
                                        :ready mount-listeners})]
于 2019-02-20T12:17:14.047 回答