jQuery Cropper插件：缩放事件时，图像保持在左上方

Question

I'm using this awesome plugin "Cropper" to upload Images of a specific size. So far, evertything works fine, but:

When I call:

    function moveImageToZero() {

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

from a button click or inside the on('ready') event of the cropper element like this

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

the canvas DOES move to the top-left corner.

Anyway, calling the 'moveTo' function from inside an Event-Handler of a cropper element:

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

nothing actually happens.

Functions are invoked properly and do not throw errors or exceptions.

Does someone have a solution for this?

I'm trying to keep the Image/Canvas always fixed to the top-left corner.

Any help is highly appreciated!

Answer 1

Try this:

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

function moveImageToZero(cropper) {

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

I'm not sure it works, but when I used cropper last time, I used native js cropper lib, and code looked like that:

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
        }
    });