在画布上绘制的图像未按预期显示

时间:2020-04-09 15:52:20

标签: canvas clojurescript

我正在使用clojurescript运行此示例: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage 我有以下内容。 (忽略细分或细分意味着什么):

(def run-segmentation (with-meta identity {:component-did-mount #(dispatch [:run-segmentation])}))
[run-segmentation
      [:div
       [:canvas {:id "img-editing"}]
        [:img {:src "/run-segmentation" :id "segmented"}]]]

css文件:

#segmented {
    border: 1px solid green;
    height: 277px;
    width: 220px;
}


#img-editing {
    border: 2px solid blue;
    width:240px;
    height:297px;
}

事件监听器:

(reg-event-db
 :run-segmentation
 (fn [db _]
   (set! (.-onload img)
         (fn []
           (let [c (js/document.getElementById "img-editing")
                 ctx (.getContext c "2d")
                 img (js/document.getElementById "segmented")]
             (.drawImage ctx img 10 10))))
   db))

但是输出不是预期的: enter image description here

我在做什么错了?

0 个答案:

没有答案