Question

我想在裁切之前放大或缩小图像。我正在使用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方法。它显示一个错误，提示“糟糕，缺少预期的对象键“缩放”” 。

当我将zoom命名为（调用cropper-inst“ cropper”“ zoom” 0.1）时，错误消息为“糟糕，应该在关键路径'cropper'上使用了一个函数，而是得到了

事件对象如下图所示：但是，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"> 有想法吗？

Answer 1

我终于明白了。我使用了（.- 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})]

ClojureScript-裁剪器单击按钮放大

1 个答案: