JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<script src="http://jsconsole.com/remote.js?DD403393-2589-4D52-B8BC-B5C7150F3FEE"></script>
<form action="" class="upload-form">
    <input type="file" multiple>
</form>
<div id="native">
     <h2>Image preview by <code>window.URL</code></h2>

</div>
<div id="resize">
     <h2>Resized image</h2>

</div>

CSS

@charset"utf-8";

/* reset */
 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, code, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
th, td {
    vertical-align: top;
}
ol, ul, menu {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* normalize */
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    margin: 0;
    display: block;
}
[hidden] {
    display: none;
}
html {
    font-family: sans-serif;
    font-weight: normal;
}
body {
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: normal;
}
input:focus, input:active, a:active, a:focus, a:hover {
    outline: 0;
}
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
input {
    font-family: sans-serif;
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}
html, body, input {
    line-height: normal;
    padding: 0;
    border: 0;
}
input[type="file"]::-webkit-file-upload-button {
    padding: 0;
    -webkit-appearance: none;
    margin: 0;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/* layout */
 body {
    background: #ffedbc;
    font: 400 16px/normal"Helvetica", "Arial", sans-serif;
    padding-top: 80px;
    padding-bottom: 40px;
}
h2, h2 code {
    font: bold 21px/normal"Georgia", "Arial", sans-serif;
}
h2 {
    padding-bottom: 20px;
}
h2 code {
    color: #743400;
}
#native, #resize {
    border: 1px dashed #828282;
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 20px;
    min-width: 400px;
    min-height: 400px;
    padding: 20px;
    vertical-align: top;
    width: 40%;
}
.upload-form {
    position:absolute;
    left:20px;
    top:20px;
    z-index:99;
    width:160px;
   ...

JavaScript

/*
 * JavaScript Canvas to Blob 2.0.5
 * https://github.com/blueimp/JavaScript-Canvas-to-Blob
 *
 * Copyright 2012, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 *
 * Based on stackoverflow user Stoive's code snippet:
 * http://stackoverflow.com/q/4998908
 */

/*jslint nomen: true, regexp: true */
/*global window, atob, Blob, ArrayBuffer, Uint8Array, define */

(function (window) {
    'use strict';
    var CanvasPrototype = window.HTMLCanvasElement && window.HTMLCanvasElement.prototype,
        hasBlobConstructor = window.Blob && (function () {
            try {
                return Boolean(new Blob());
            } catch (e) {
                return false;
            }
        }()),
        hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array && (function () {
            try {
                return new Blob([new Uint8Array(100)]).size === 100;
            } catch (e) {
                return false;
            }
        }()),
        BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder,
        dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob && window.ArrayBuffer && window.Uint8Array && function (dataURI) {
            var byteString,
            arrayBuffer,
            intArray,
            i,
            mimeString,
            bb;
            if (dataURI.split(',')[0].indexOf('base64') >= 0) {
                // Convert base64 to raw binary data held in a string:
                byteString = atob(dataURI.split(',')[1]);
            } else {
                // Convert base64/URLEncoded data component to raw binary data:
                byteString = decodeURIComponent(dataURI.split(',')[1]);
            }
            // Write the bytes of the string to an ArrayBuffer:
            arrayBuffer = new ArrayBuffer(byteString.length);
            intArray = new Uint8Array(arrayBuffer);
          ...