search

scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
875 stars 304 forks source link

Image move when zooming #266

Open pixelreseller opened 7 years ago

pixelreseller commented 7 years ago

When i use range input to scale image, the anchor is in the left-top, and all moves (including rotate) are made from this anchor, not centered following cropper preview. What am i missing?

$('#image-cropper').cropit({
                    freeMove: true,
                    initialZoom: 'image',
                    maxZoom: '2',
                    minZoom: 'fit',
                    smallImage: 'allow',
                    width: '320',
                    height: '320',
                    onImageLoaded: function(e) {
                        imageSize = $('#image-cropper').cropit('imageSize');
                        $('#image-cropper').cropit('offset', { x: 0, y: 0 });
                        $(".cropit-preview-image-container").css("height", $("html").outerWidth());
                        $('#image-cropper').cropit('previewSize', { width: imageSize.width, height: imageSize.width });
                    }
                });
#lvb-image-cropper { width: 320px; } // container
#image-cropper { width: 100%; height: 100%; background-color: white }
pixelreseller commented 7 years ago

If i remove ".cropit('offset', { x: 0, y: 0 });", all move are ok, but my image is initialized out of preview area. I have to zoom out, move image in center of preview, and then i can modify it.