JSFiddle - React, Tailwind, and code Playground

by kacprek

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
        <title>Jcrop &raquo; Tutorials &raquo; aspectRatio w/ Preview</title>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
    </head>

    <body>
    <div id="outer">
    <div class="jcExample">
    <div class="article">

        <h1>Jcrop - Aspect ratio w/ preview pane</h1>

        <table>
            <tr>
                <td>
                <div>
                    <img src="http://imgon.net/di-M7Z9.jpg" id="picture"/>
                </div>
                </td>
                <td>
                    <canvas id="preview-crop"></canvas>
                </td>
            </tr>
            <tr>
            <td>
                    <canvas id="rotate"></canvas>
            </td>
            </tr>
        </table>
        <p>
            <strong>Rotate Image: </strong>
            <a href="javascript:;" id="resetImage">Reset Image</a>
            <a href="javascript:;" id="rotate90">90&deg;</a>
            <a href="javascript:;" id="rotate180">180&deg;</a>
            <a href="javascript:;" id="rotate270">270&deg;</a>
            <a href="javascript:;" id="flipH">flip h</a>
            <a href="javascript:;" id="flipV">flip v</a>
        </p>
    </div>
    </div>
    </div>

CSS

#picture {
    height: 450px;
}

#container {
    width:200px;
    height:300px;
    overflow:hidden;
}


/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
    font-size: 0px;
    position: absolute;
    background: white url('Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-vline.right { right: 0px; }
.jcrop-hline.bottom { bottom: 0px; }
.jcrop-handle {
    font-size: 1px;
    width: 6px !important;
    height: 6px !important;
    border: 1px #eee solid;
    background-color: #333;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
    background: yellow;
}
.custom .jcrop-handle
{
    border-color: black;
    background-color: #C7BB00;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

JavaScript

/**
 * jquery.Jcrop.min.js v0.9.9 (build:20110607)
 * jQuery Image Cropping Plugin
 * @author Kelly Hallman <[email protected]>
 * Copyright (c) 2008-2011 Kelly Hallman - released under MIT License
 * https://github.com/tapmodo/Jcrop
 */

(function($) {
    $.Jcrop = function(obj, opt) {
        var options = $.extend({}, $.Jcrop.defaults),
            docOffset, lastcurs, ie6mode = false;

        function px(n) {
            return parseInt(n, 10) + 'px';
        }

        function pct(n) {
            return parseInt(n, 10) + '%';
        }

        function cssClass(cl) {
            return options.baseClass + '-' + cl;
        }

        function supportsColorFade() {
            return $.fx.step.hasOwnProperty('backgroundColor');
        }

        function getPos(obj) {
            var pos = $(obj).offset();
            return [pos.left, pos.top];
        }

        function mouseAbs(e) {
            return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
        }

        function setOptions(opt) {
            if (typeof(opt) !== 'object') {
                opt = {};
            }
            options = $.extend(options, opt);
            if (typeof(options.onChange) !== 'function') {
                options.onChange = function() {};
            }
            if (typeof(options.onSelect) !== 'function') {
                options.onSelect = function() {};
            }
            if (typeof(options.onRelease) !== 'function') {
                options.onRelease = function() {};
            }
        }

        function myCursor(type) {
            if (type !== lastcurs) {
                Tracker.setCursor(type);
                lastcurs = type;
            }
        }

        function startDragMode(mode, pos) {
            docOffset = getPos($img);
            Tracker.setCursor(mode === 'move' ? mode : mode + '-resize');
            if (mode === 'move') {
                return Tracker.activateHandlers(createMover(pos), doneSelect);
            }
 ...