search

scottcheng / cropit

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

need to zoom out a large image, until it fit to preview container #127

Closed cpagit closed 6 years ago

cpagit commented 8 years ago

Hi! There are surely some options I'm missing... I have a large image (height of 1570px and width of 1324px), which initially is partially displayed in the preview container (it's ok, it's what I want) and the slider is initially set at its middle position approximately. From there, I want to zoom out until the width fits in the preview container (180px). I'm able to do that, but the quality is not good enough. Note that this is not an export problem, just a preview problem. Thanks for advice!

My options are currently:

$(function() { $('.image-editor').cropit({ minZoom: 'fill', maxZoom: 3, initialZoom: 'image', smallImage: 'allow', imageBackground: true, imageBackgroundBorderWidth: 20, imageState: { src: ' [ ... a large image ] ', }, });

var zoomSlider = $('.image-editor').find('input.cropit-image-zoom-input');
zoomSlider.attr({ min: 0, max: 1, step: 0.01 });

});

And css contains: .cropit-image-preview { background-color: #f8f8f8; background-size: cover; border: 5px solid #ccc; border-radius: 3px; margin-top: 7px; width: 180px; height: 213px; cursor: move; }

cropit_example

ghost commented 8 years ago

thanks a lot

rakeshaspl commented 6 years ago

Just change this option.

  minZoom:'fit',
rakeshaspl commented 6 years ago

For quality, you can set by set of this options.

$imageCropper.cropit('export', { type: 'image/jpeg', quality: 0.9, });

cpagit commented 6 years ago

Thanks, may be it will help someone else. I reported this problem 2 years ago and finally, I decided to use "Cropper" instead of "Cropit". See https://github.com/fengyuanchen/cropper. I close this issue.