How to save using Javascript Image cropper "Croppie"

Question

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.

I think this question is not related to javascript itself since all you want is to record your crop data into your database/server. Please, consider reading this question: http://stackoverflow.com/questions/34237020/jquery-plugin-croppie-to-crop-image-error — Anna, Apr 20 '16 at 21:33
That was a good link and has gotten me close. But the only thing is I do not know enough of Javascript to successfully pull out the upload feature. My Croppie gets the image from a directory on the server not from uploading. So i am trying to figure out how to strip the upload feature from the script [link]http://stackoverflow.com/a/34623950/1618085 and only use the save to server feature ... can anyone help me with this? — James, Apr 21 '16 at 15:18

score 3 · Answer 1 · answered Apr 20 '16 at 22:36

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>

score 2 · Accepted Answer · answered Apr 21 '16 at 19:13

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.

How to save using Javascript Image cropper "Croppie"

2 Answers2