JSFiddle - React, Tailwind, and code Playground

by mattography

JavaScript

$(function () {
    var fileInput = document.getElementById("file"),
        renderButton = $("#renderButton"),
        imgly = new ImglyKit({
            container: "#container",
            ratio: 1 / 1
        });

    // As soon as the user selects a file...
    fileInput.addEventListener("change", function (event) {
        var file;

        // Find the selected file
        if (event.target.files) {
            file = event.target.files[0];
        } else {
            file = event.target.value;
        }

        // Use FileReader to turn the selected
        // file into a data url. ImglyKit needs
        // a data url or an image
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                data = e.target.result;

                // Run ImglyKit with the selected file
                try {
                    imgly.run(data);
                } catch (e) {
                    if (e.name == "NoSupportError") {
                        alert("Your browser does not support canvas.");
                    } else if (e.name == "InvalidError") {
                        alert("The given file is not an image");
                    }
                }
            };
        })(file);
        reader.readAsDataURL(file);
    });

    // As soon as the user clicks the render button...
    // Listen for "Render final image" click
    renderButton.click(function (event) {
        var dataUrl;

        imgly.renderToDataURL("image/jpeg", {
            size: "1200"
        }, function (err, dataUrl) {

            //Convert DataURL to Blob to send over Ajax
            dataURLToBlob: function (dataUrl) {
                var BASE64_MARKER = ';base64,';
                if (dataUrl.indexOf(BASE64_MARKER) == -1) {
                    var parts = dataURL.split(',');
                    var contentType = parts[0].split(':')[1];
                    var raw = decodeURIComponent(parts[1]);

                   ...