JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="panel crop">
                    <div class="well">
                    <div class="form-group">
                      <div class="input-group col-md-6">
                        <input type="text" class="form-control" placeholder="Search by Asset ID" maxlength="64" class="form-control" id="imageid" name="imageid">
                        <span class="input-group-btn">
                          <button class="btn btn-default image-search" type="button">Search</button>
                        </span>
                      </div>
                      <fieldset class="scheduler-border">
                        <legend class="scheduler-border results-title">Asset Images</legend>
                          <div class="scheduler-broder">
                            <div class="search-results"></div>
                          </div>
                      </fieldset>
                    </div>
                    <div class="form-group">
                    <label for="image">Select Asset Type:</label>
                    <select id='crop' class="btn btn-default" data-toggle="dropdown">
                        <option value="default">Choose Type</option>
                        <option value="now">Now</option>
                        <option value="livefeeds">Live Feeds</option>
                    </select>
                    </div> 
                    <div class="form-group"> 
                     <label for="imageid">Select an image</label>
                        <input type="file" name="file" class="btn btn-default form-control" id="file" accept="image/jpg, image/png, image/jpeg"/>
                    </div>
                    <div...

JavaScript

// As soon as the user clicks the render button...
    // Listen for "Render final image" click
    renderButton.click(function (event) {
        var dataUrl;
        $(".result, .share-link").empty();
        $(".submit, .remove").remove();

        imgly.renderToDataURL("image/jpeg", {
            size: "1200"
        }, function (err, dataUrl) {
            // `dataUrl` now contains a resized rendered image

            //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 byteString = atob(dataUrl.split(',')[1]);

                // separate out the mime component
                var mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];

                // write the bytes of the string to an ArrayBuffer
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                // write the ArrayBuffer to a blob, and you're done
                //var bb = new BlobBuilder();
                //bb.append(ab);
                //return bb.getBlob(mimeString);
                return new Blob([ab], {
                    type: 'image/jpeg'
                });
            }


            var blob = dataURItoBlob(dataUrl);
            //console.log("var blob: " + blob);
            //var fd = new FormData(document.forms[0]);
            var image = $("<img id='result'><br>").attr({
                src: dataUrl
            });


            image.appendTo($(".result"));

//TO SUBMIT FINAL RENDERED PHOTO
            $submitButton = $('<div class="btn btn-success submit"></div>')
                .text('Submit ' + imageid.value).appendTo($(".submit-well"))
     ...