example.html

﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Uploader</title>
    <style>
.img-export {
    display: block;
}
    </style>
</head>
<body>
    <label class="img-upload-label">
        Upload Image:
        <input type="file" class="js-fileinput img-upload" accept="image/jpeg,image/png,image/gif">
    </label>
    <button class="js-export img-export">Export</button>
    <canvas class="js-editorcanvas"></canvas>
    <canvas class="js-previewcanvas"></canvas>

    <script src="cropper.js"></script>
    <script>
function exceptionHandler(message) {
  alert(message);
}

// Auto-resize the cropped image
var dimensions = { width: 128, height: 128 };

try {
    var uploader = new Uploader({
        input: document.querySelector('.js-fileinput'),
        types: [ 'gif', 'jpg', 'jpeg', 'png' ]
    });

    var editor = new Cropper({
        size: dimensions,
        canvas: document.querySelector('.js-editorcanvas'),
        preview: document.querySelector('.js-previewcanvas')
    });

    // Make sure both were initialised correctly
    if (uploader && editor) {
        // Start the uploader, which will launch the editor
        uploader.listen(editor.setImageSource.bind(editor), (error) => { throw error; });
    }
    // Allow the result to be exported as an actual image
    var img = document.createElement('img');
    document.body.appendChild(img);
    document.querySelector('.js-export').onclick = (e) => editor.export(img);

} catch (error) {
    exceptionHandler(error.message);
}
    </script>
</body>
</html>