JSFiddle - React, Tailwind, and code Playground

by irina_dfy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas style="border: 1px solid black" id="c"></canvas>
<button id=cropB hidden>crop</button>
<button id=showCrop>showCrop</button>

JavaScript

var container = document.getElementById('c').getBoundingClientRect();
var canvas = new fabric.Canvas('c');


var image;
fabric.util.loadImage("http://fabricjs.com/lib/pug.jpg", function(img) {
    image = new fabric.Image(img);
    //image.selectable = false;
    image.width = 400;
    image.originX='center';
    image.originY='center';
    image.height = 400;
    
    canvas.add(image);
    canvas.centerObject(image);
    canvas.renderAll();
});


$('#showCrop').on('click', function() {
    $('#cropB').show();
    
   var object = canvas.getActiveObject();
    object.selectable = false;
// set to the event when the user pressed the mouse button down
var mouseDown;
// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
    fill: 'transparent',
    stroke: '#ccc',
    strokeDashArray: [2, 2],
    visible: false
});

canvas.add(rectangle);

// capture the event when the user clicks the mouse button down
canvas.on("mouse:down", function(event) {
    if(!disabled) {
        rectangle.width = 2;
        rectangle.height = 2;
        rectangle.left = event.e.pageX - container.left;
        rectangle.top = event.e.pageY - container.top;
        rectangle.visible = true;
        mouseDown = event.e;
        canvas.bringToFront(rectangle);
    }
});
// draw the rectangle as the mouse is moved after a down click
canvas.on("mouse:move", function(event) {
    if(mouseDown && !disabled) {
        rectangle.width = event.e.pageX - mouseDown.pageX;
        rectangle.height = event.e.pageY - mouseDown.pageY;
        canvas.renderAll();
    }
});
// when mouse click is released, end cropping mode
canvas.on("mouse:up", function() {
    mouseDown = null;
});
$('#cropB').on('click', function() {
   
    object.clipTo = function(ctx) {
        // origin is the center of the image
        var x = rectangle.left - object.getWidth() / 2;
        var y = rectangle.top - object.getHeight() / 2;
        ctx.rect(x, y, rectangle.width,...