JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-fluid">
    <form id="fileUpload" class="form-horizontal" enctype="multipart/form-data">
        <div class="row">
            <div class="col-md-6">
                <div class="panel crop">
                    <div class="well">
                        <input type="file" name="file" class="btn btn-default form-control" id="file" accept="image/jpg, image/png, image/jpeg" />
                        <button class="btn btn-default" id="reset">Reset</button>
                        <input id="renderButton" type="button" value="Render final image" class="btn btn-primary" />
                    </div>
                    <div class="well">
                        <div class="form-group">
                            <label for="imageid">Include image attribution ID</label>
                            <input type="text" onkeypress="return charsOnly(this, event)" maxlength="30" class="form-control" id="imageid" name="imageid" placeholder="Enter image ID">
                        </div>
                    </div>
                    <div class="panel-body cropper">
                        <div id="container" class="well"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 render">
                <div class="panel">
                    <div class="panel-body">
                        <div id="result_container" class="result thumbnail"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-9 col-md-offset-3">
                <div id="messages"></div>
            </div>
        </div>
    </form>
</div>

CSS

#container {
      width: 540px;
      height: 600px;
    }
    .result{
      width: 50%;
    }
    .imgly-container{
      background-color: #000;
    }

JavaScript

/**
 * ImglyKit
 * integration example
 *
 * Copyright (c) 2013-2014 img.ly
 */

$(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;

    var fileToBlob = event.target.files[0];
          var blob = new Blob([fileToBlob], {"type":fileToBlob.type});
          // do stuff with blob
          console.log(blob);
    // 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) {
      // `dataUrl` now contains a resized rendered image with
      // a width of 300 pixels while keeping the ratio

       //Convert DataURL to Blob to send over Ajax
        function dataURItoBlob(dataUrl) {
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
        var...