ObjectCrop

by knospe

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="filters">
    <ul class="clearfix">
        <li class="clearfix">
            <div class="block">	<a href="#" id="startCrop" class="button">Enter crop mode</a>

            </div>
            <div class="block">	<a href="#" id="crop" class="button">Crop</a>

            </div>
        </li>
    </ul>
</div>
<div id="canvas-container" class="over">
    <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
}
body {
    background:#8f8f8f;
}
canvas {
}
#canvas-container {
    background:#fff;
    width:800px;
}
.canvas-container {
    background:#fff;
    width:800px;
    background-size:100%;
}
.clearfix:after {
    clear: both;
    content:' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    box-shadow:inset 0px 1px 0px 0px #cae3fc;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee));
    background:-moz-linear-gradient(center top, #79bbff 5%, #4197ee 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
    background-color:#79bbff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #469df5;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    padding:0 20px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #287ace;
    text-transform:uppercase;
    margin:10px;
}
.button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4197ee),...

JavaScript

var canvas = new fabric.Canvas('canvas');
var el;
var object, lastActive, object1, object2;
var cntObj = 0;
var selection_object_left = 0;
var selection_object_top = 0;

var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (oImg) {
    canvas.add(oImg);
});

fabric.Image.fromURL('http://www.clker.com/cliparts/2/5/6/5/1194986466653224692smiley110.svg.med.png', function (oImg1) {
    oImg1.top = 200;
    oImg1.left = 300;
    canvas.add(oImg1);
});
canvas.renderAll();


$('#crop').on('click', function (event) {

    var eLeft = el.get('left');
    var eTop = el.get('top');
    var left = eLeft - object.left;
    var top = eTop - object.top;

    left *= 1;
    top *= 1;

    var eWidth = el.get('width');
    var eHeight = el.get('height');
    var eScaleX = el.get('scaleX');
    var eScaleY = el.get('scaleY');
    var width = eWidth * 1;
    var height = eHeight * 1;
    object.clipTo = function (ctx) {

        ctx.rect(-(eWidth / 2) + left, -(eHeight / 2) + top, parseInt(width * eScaleX), parseInt(eScaleY * height));


    }



    for (var i = 0; i < $("#layers li").size(); i++) {
        canvas.item(i).selectable = true;
    }
    disabled = true;

    canvas.remove(el);
    lastActive = object;
    canvas.renderAll();



});

$('#startCrop').on('click', function () {



    canvas.remove(el);
    if (canvas.getActiveObject()) {

        object = canvas.getActiveObject();

        if (lastActive !== object) {
            console.log('different object');
        } else {
            console.log('same object');
        }
        if (lastActive && lastActive !== object) {
            //lastActive.clipTo = null; results in clip loss

        }



        el = new fabric.Rect({
            fill: 'rgba(0,0,0,0.3)',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            strokeDashArray: [2, 2],
            opacity: 1,
            width: 1,
...