I'm using the JavaScript Croppie library to create an image cropper. I've been given the task of adding buttons that give users the option to crop to a certain aspect ratio if they want instead of just resizing it themselves (the current options I've included are 9 by 16, 1 by 1, and 16 by 9). To do this, I wrote a function called changeSize that gets passed in the new width and new height of the photo cropper. This works, but the only problem is that it makes me reupload the image every time I click on a different aspect ratio button. How can I fix this problem? Perhaps by saving the image as a variable? Not sure. The following is my code for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Croppie</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>
<script src=""></script>
<style type="text/css">
#croppie-demo {
width: 350px;
}
#croppie-container {
padding-top: 30px;
padding-left: 160px;
}
#croppie-view {
background: #e1e1e1;
width: 450px;
padding-left: 40px;
height: 450px;
}
#size-changers {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Croppie</h2>
<div class="row">
<div class="col-md-4 text-center">
<div id="croppie-demo"></div>
</div>
<div class="col-md-4" id="croppie-container">
<strong>Select Image:</strong>
<br/>
<input type="file" id="croppie-input">
<br/>
<button class="btn btn-success croppie-upload">Upload Image</button>
<div id="size-changers">
<p>Aspect Ratio: </p>
<button type="button" onclick="changeSize(250, 250)">1</button>
<button type="button" onclick="changeSize(444, 250)">16/9</button>
<button type="button" onclick="changeSize(250, 444)">9/16</button>
</div>
</div>
<div class="col-md-4" style="">
<div id="croppie-view"></div>
</div>
</div>
</div>
<script type="text/javascript">
function changeSize(newWidth, newHeight) {
// reload the croppie thing with new width and height
$('#croppie-demo').croppie('destroy'); // might need to get rid of this
croppieDemo = $('#croppie-demo').croppie({
enableOrientation: true,
enableResize: true,
viewport: {
width: newWidth,
height: newHeight,
type: 'square' // or 'circle'
},
boundary: {
width: 450,
height: 450
}
});
}
var croppieDemo = $('#croppie-demo').croppie({
enableOrientation: true,
enableResize: true,
viewport: {
width: 250,
height: 250,
type: 'square' // or 'circle'
},
boundary: {
width: 450,
height: 450
}
});
$('#croppie-input').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
croppieDemo.croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(this.files[0]);
});
$('.croppie-upload').on('click', function (ev) {
croppieDemo.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (image) {
html = '<img src="' + image + '" />';
$("#croppie-view").html(html);
});
});
</script>
</body>
</html>
It makes you re-upload the image because you are destroying the Croppie instance and rebuilding it when you are changing the aspect ratio. To overcome this issue, you can save the image to a global variable and load it when you are re-initialising Croppie when aspect ratio changes.