JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css">
<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<script src="http://edge1u.tapmodo.com/global/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://edge1u.tapmodo.com/deepliq/jcrop_demos.css">
<script src="http://edge1v.tapmodo.com/deepliq/jcrop_demos.js"></script>
<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>
<div id="preview-pane">
    <div class="preview-container">
        <canvas id="imageCanvas2"></canvas>
    </div>
</div>
<!-- @end #preview-pane -->
<div id="form-container">
    <form id="cropimg" name="cropimg" method="post" action="/uploader/crop" style="margin-top:20px;">
        <input type="hidden" id="x" name="x">
        <input type="hidden" id="y" name="y">
        <input type="hidden" id="w" name="w">
        <input type="hidden" id="h" name="h">
        <input type="hidden" id="u" name="u" value="<?php echo $usr_id;?>">
        <input type="hidden" id="t" name="t" value="<?php echo $_SESSION['token'];?>">
        <input type="submit" id="submit" value="Crop Image!" class="btn btn-warning">
    </form>
</div>
<!-- @end #form-container -->

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
    jcropShow();
}

function jcropShow() {
    $('#imageCanvas').Jcrop({
        bgColor: 'black',
        bgOpacity: .4,
        setSelect: [0, 0, 50, 50],
        aspectRatio: 1 / 1
    });


}