Menu
Croppie uses a DIV container and not a CANVAS to do its cropping. I am trying to find out how to save the resulting cropped image from this DIV to a directory on the Server, such as via a SAVE button.
Here is my HTML code ...
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="css/croppie.css" />
<link rel="Stylesheet" type="text/css" href="css/sweetalert.css" />
</head>
<body>
<div id="testCanvas"></div>
<div class="actions" style="margin-left: auto; margin-right: auto; width:250px;">
<button class="vanilla-result">Result</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<p><button onclick="function();">Save</button></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/croppie.js"></script>
<script src="js/demo.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
Demo.init();
</script>
</body>
</html>
Here is my JavaScript configurations ...
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('testCanvas'), {
viewport: { width: 300, height: 300, type: 'square' },
boundary: { width: 350, height: 350 },
enableOrientation: true
});
vanilla.bind({
url: 'imgs/demo-1.jpg',
orientation: 1
});
document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
vanilla.result('canvas').then(function (src) {
popupResult({
src: src
});
});
});
$('.vanilla-rotate').on('click', function(ev) {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
The rest comes by default without changes from Croppie at https://github.com/Foliotek/Croppie such as demo.js, etc.
519
Here is an example on how to make a download button. If you figure out how this works, then you just need to replace the <a>link with for a <form> with a submit button,
var vanillaResult = document.querySelector('.vanilla-result'),
vanillaSave = document.querySelector('.vanilla-save'),
vanillaRotate = document.querySelector('.vanilla-rotate');
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
viewport: {
width: 100,
height: 100
},
boundary: {
width: 300,
height: 300
},
enableOrientation: true
});
vanilla.bind({
url: 'http://foliotek.github.io/Croppie/demo/cat.jpg',
orientation: 1
});
vanillaResult.addEventListener('click', function() {
vanilla.result('canvas').then(resultVanilla);
});
vanillaSave.addEventListener('click', function() {
vanilla.result('canvas').then(saveVanilla);
});
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
function resultVanilla(result) {
swal({
title: '',
html: true,
text: '<img src="' + result + '" />',
allowOutsideClick: true
});
}
function saveVanilla(result) {
swal({
title: '',
html: true,
text: '<a id="save" href="' + result + '" download="result"><img src="' + result + '" /><br><button>Download</button></a>',
showConfirmButton: false,
showCancelButton: true,
allowOutsideClick: true,
});
}
demoVanilla();body {
min-width: 360px;
}
.actions {
width: 300px;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="http://foliotek.github.io/Croppie/croppie.css" />
<link rel="Stylesheet" type="text/css" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" />
</head>
<body>
<div id="vanilla-demo"></div>
<div class="actions">
<button class="vanilla-result">Result</button>
<button class="vanilla-save">Save</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://foliotek.github.io/Croppie/croppie.js"></script>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
</body>
</html>GOT IT!
Thanks to one of the developers of Croppie "thedustinsmith" and "TWFPSP" for directing me to the right eternal resources and their offered info.
$( document ).ready(function() {
vanillaRotate = document.querySelector('.vanilla-rotate');
var $uploadCrop = $('#upload-demo');
$uploadCrop.croppie({
viewport: {
width: 250,
height: 250,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$uploadCrop.croppie('bind', 'imgs/cat.jpg');
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
HTML body ...
<form action="test-image.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
test-image.php ...
<?php
if(isset($_POST['imagebase64'])){
$data = $_POST['imagebase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image64.png', $data);
}
?>
Now the rotate function is not working and I am trying to fix it. Seem to not know how to include the orientation configs in this setting which is different than the demoUpload where it is illustrated in the demo file. But at least the saving to the server works great.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With