JSFiddle - React, Tailwind, and code Playground

by Shakti Patel

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.7.4/fabric.min.js"></script>
<canvas style="border: 1px solid black" id="canvas"></canvas>
<button id=cropB>crop</button>

JavaScript

fabric.RxImage = fabric.util.createClass(fabric.Image, {
    type: 'rxImage',
    zoomedXY: false,
    initialize: function(element, options) {        
        this.callSuper('initialize', element, options);
        this.set({
            orgSrc: element.src,
            cx: 0, // clip-x
            cy: 0, // clip-y
            cw: element.width, // clip-width
            ch: element.height // clip-height
        });
    },

    setClipOptions: function(options) {
        this.set({
            orgSrc: options.src,
            cx: 0, // clip-x
            cy: 0, // clip-y
            cw: options.width, // clip-width
            ch: options.height // clip-height
        });
        this.zoomBy(0, 0, 0);
    },

    _render: function(ctx) {
      //var ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.rect(40, 40, 100, 100);
      ctx.closePath();
      ctx.stroke();
      ctx.clip();
      this.callSuper('_render', ctx);
    },


    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            orgSrc: this.orgSrc,
            cx: this.cx,
            cy: this.cy,
            cw: this.cw,
            ch: this.ch
        });
    }
});

fabric.RxImage.async = true;
fabric.RxImage.fromObject = function(object, callback) {
    fabric.util.loadImage(object.src, function(img) {
        fabric.Image.prototype._initFilters.call(object, object, function(filters) {
            object.filters = filters || [];
            var instance = new fabric.RxImage(img, object);
            if (callback) {
                callback(instance);
            }
        });
    }, null, object.crossOrigin);
};

var imgObj = new Image();
imgObj.src = "http://fabricjs.com/lib/pug.jpg";

var canvas = new fabric.Canvas('canvas', {width:500, height:500});

var rxCanvasObject = new fabric.RxImage(imgObj);
canvas.add(rxCanvasObject);