Closed seehtml closed 7 years ago
Destroy it and restart again.
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>
// 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 // .....