javascript - jQuery Cropper 插件：在缩放事件中将图像保持在左上角

Question

我正在使用这个很棒的插件“Cropper”来上传特定大小的图像。到目前为止，一切都很好，但是：

当我打电话时：

    function moveImageToZero() {

    $("#target").cropper('moveTo',0,0);
}

从按钮单击或在裁剪器元素的 on('ready') 事件中，如下所示

    $("#target").on('ready', function () {
        moveImageToZero();
    });

画布确实移动到左上角。

无论如何，从裁剪器元素的事件处理程序内部调用“moveTo”函数：

$("#target").on('zoom',function () {
            moveImageToZero();
        });

实际上什么也没发生。

函数被正确调用并且不会抛出错误或异常。

有人对此有解决方案吗？

我试图将图像/画布始终固定在左上角。

非常感谢任何帮助！

Answer 1

尝试这个：

 $("#target").on('ready', function () {
    moveImageToZero(this.cropper); 
});

function moveImageToZero(cropper) {

 cropper('moveTo',0,0);
}

我不确定它是否有效，但是当我上次使用cropper时，我使用了native jscropper lib，代码看起来像这样：

const cropper = new Cropper(imageEl, {
        aspectRatio: this.aspectRatio 
        background: false,
        rotatable: true,
        zoomable: !!this.aspectRatio,
        movable: false,
        checkCrossOrigin: false,
        crop: (e) => {
            // on cropp event

        },
        ready: function () {
            self.cropper = this.cropper; // so I use it outside in my function/class
        }
    });