ClojureScript集成CropperJS：按钮点击缩放功能异常求助

看起来你碰到了两个关键问题，导致缩放功能无法正常工作，我来帮你一步步修正：

问题分析 #

1. 传递错误的对象给缩放函数
   你在mount-listeners里把cropper-el（也就是原始的img DOM元素）传给了zoom-in/zoom-out，但zoom是Cropper实例的方法，不是img元素的方法，这就是为什么会报“Missing expected object key 'zoom'”的错误。

2. 事件回调的写法错误
   你直接写了(zoom-in cropper-el)作为点击回调，这会在绑定监听器的时候立即执行zoom-in，而不是在点击按钮时执行。最终传递给addEventListener的是zoom-in的返回值（nil），所以点击按钮时完全没有反应。

修正后的代码 #

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

; 缩放函数保持逻辑，确保接收的是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)))

; 修正监听器绑定逻辑：使用Cropper实例，且回调用匿名函数延迟执行
(defn mount-listeners [cropper]
  (let [zoom-in-el (js/document.getElementById "zoom-in-el")
        zoom-out-el (js/document.getElementById "zoom-out-el")]
    ; 用#()创建匿名函数，点击时才执行缩放
    (ocall zoom-in-el "addEventListener" "click" #(zoom-in cropper))
    (ocall zoom-out-el "addEventListener" "click" #(zoom-out cropper))))

; 修正ready回调，传递正确的Cropper实例
(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回调中，this指向Cropper实例，传给mount-listeners
                                        :ready (fn [] (mount-listeners this))})]
        cropper))))

关键修正点说明 #

• 使用Cropper实例而非DOM元素：mount-listeners现在接收的是Cropper实例，直接用它调用zoom方法，符合CropperJS的API要求。
• 延迟执行回调：#(zoom-in cropper)创建了一个匿名函数，只有当按钮被点击时才会触发缩放操作，而不是绑定监听器时立即执行。
• 正确传递实例到ready回调：Cropper初始化完成后，ready回调的this就是当前的Cropper实例，我们把它传给mount-listeners，确保监听器绑定的是正确的实例。

这样修改后，点击放大/缩小按钮应该就能正常调用zoom方法，实现图片缩放功能了。

内容的提问来源于stack exchange，提问作者Tessy Thomas