Crop file using fabric

by Radonirina Maminiaina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<button id="crop">Crop image</button>
<input type="range" min="0.1" step="0.1" max="2" id="range">
<canvas id="canvas"></canvas>

CSS

#canvas {
  width: 100%;
  height: 495px;
  background: black;
}

.zone-crop {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px red;
  position: absolute;
}

JavaScript

var canvas = null
var image = null
var canvasWidth = 0
var canvasHeight = 0
var canvasImage = null
var IMAGE_SRC = 'https://picsum.photos/1920/1080?random'
var zoneWidth = 390
var zoneHeight = 170
var zoneX = 0
var zoneY = 0
var canvasImage = null

function init () {
	var canvasDom = document.getElementById('canvas')
  canvasWidth = canvasDom.scrollWidth
  canvasHeight = canvasDom.scrollHeight
  
  canvas = new fabric.Canvas('canvas', {
  	preserveObjectStacking: true
  })
  
  canvas.setWidth(canvasWidth)
  canvas.setHeight(canvasHeight)
  
  draw()
  drawZoneCrop()
  handleZoom()
  cropImage()
}

function draw () {
	image = new Image()
  image.src = IMAGE_SRC
  image.onload = function () {
  	var center = centerXY(image.width, image.height)
  	canvasImage = drawImage(image, center.x, center.y)
    canvas.add(canvasImage)
    hanldeImageMoving()
  }
}

function drawZoneCrop () {
	var center = centerXY(zoneWidth, zoneHeight)
  zoneX = center.x
  zoneY = center.y
	$(`<div class="zone-crop" />`).appendTo('.canvas-container')
  $('.zone-crop').css({width: zoneWidth, height: zoneHeight})
}

function centerXY (w, h) {
	return {
  	x: canvas.width / 2 - w / 2,
    y: canvas.height / 2 - h / 2
  }
}

function hanldeImageMoving () {
	canvas.on('object:moving', function (e) {
  	var obj;
    obj = e.target;
    obj.setCoords();
    var boundingRect = obj.getBoundingRect();
    var zoom = canvas.getZoom();
    var viewportMatrix = canvas.viewportTransform;


    boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
    boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
    boundingRect.width /= zoom;
    boundingRect.height /= zoom;

    var ch = obj.canvas.height / 2 - (zoneHeight / 2) + zoneHeight/ zoom,
        cw = obj.canvas.width / 2 - (zoneWidth / 2) + zoneWidth / zoom;

    if(boundingRect.top > obj.canvas.height / 2 - (zoneHeight / 2)){
      obj.top = obj.canvas.height / 2 - (zoneHeight / 2);
    }

    if(boundingRect.left >...