fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.75k stars 1.74k forks source link

how to change minCropBoxWidth when I need #870

Closed seehtml closed 7 years ago

seehtml commented 7 years ago

// this is init $('#up-img-show').cropper({ aspectRatio: '1', autoCropArea: 0.8, preview: '.up-pre-after', minCropBoxWidth: 140 });

// how to change the minCropBoxWidth in here // .....

fengyuanchen commented 7 years ago

Destroy it and restart again.

chrisloughnane commented 7 years ago

HTML

<div><button title="Set 400x400" type="button" class="btn btn-primary btn-lg change-crop-size" data-cropped-width="400" data-cropped-height="400"><i class="fa fa-crop" aria-hidden="true"></i> 400x400</button></div>
<div><button title="Set 600x400" type="button" class="btn btn-primary btn-lg change-crop-size active" data-cropped-width="600" data-cropped-height="400"><i class="fa fa-crop" aria-hidden="true"></i> 600x400</button></div>

JS

<script type="text/javascript">
    $(".change-crop-size").click(function () {

        var $this = $(this);

        croppedImageHeight = $this.data("cropped-height");
        croppedImageWidth = $this.data("cropped-width");

        var cropBoxData = $canvas.cropper('getCropBoxData');
        var canvasData = $canvas.cropper('getCanvasData');

        options.built = function () {
            $canvas.cropper('setCropBoxData', cropBoxData);
            $canvas.cropper('setCanvasData', canvasData);
        };

        options['aspectRatio'] = croppedImageWidth / croppedImageHeight;

        $canvas.cropper('destroy').cropper(options);
        console.log("aspect " + options['aspectRatio']);
    });
</script>