art assignment image crop

art assignment image crop

by brigand

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<canvas style="-moz-user-select: none; cursor: crosshair;" width="1043" height="877" id="c1"></canvas>
<!-- <button id=cropB>crop</button> -->
<button id=cropA>Crop</button>
<h1 id=cropAlert style="color: #e8702a;" hidden>Crop Mode Active.</h1>

CSS

body {
    background-color:#ccc;
}

JavaScript

var canvas = new fabric.Canvas('c1');
/* var src = "http://fabricjs.com/lib/pug.jpg"; */
let imgs = [
'https://vignette.wikia.nocookie.net/megaman/images/5/58/Z2_scene_03.gif/revision/latest?cb=20100726235543', 'https://vignette.wikia.nocookie.net/megaman/images/f/f2/Rockman_X_DiVE_Hunter_Alia.png/revision/latest?cb=20190913043944','https://vignette.wikia.nocookie.net/megaman/images/6/60/FenriLunaedge.jpg/revision/latest?cb=20080530182630','https://vignette.wikia.nocookie.net/megaman/images/a/a0/Normal_noble_mandrago-1-.jpg/revision/latest?cb=20190618155614', 'https://vignette.wikia.nocookie.net/megaman/images/2/2b/AnubisNecromancess.jpg/revision/latest?cb=20080328051432','https://vignette.wikia.nocookie.net/megaman/images/8/8d/CubitFoxstar.jpg/revision/latest?cb=20091203000014'
]
canvas.backgroundColor = "#333";
canvas.renderAll();

var pos = [0, 0];

var r = document.getElementById('c1').getBoundingClientRect();
pos[0] = r.left;
pos[1] = r.top;

var mousex = 0;
var mousey = 0;
const scale = 0.359;
var crop = false;
var disabled = true;

//console.log(pos);

var el = new fabric.Rect({
    //left: 100,
    //top: 100,
    fill: 'transparent',
    originX: 'left',
    originY: 'top',
    stroke: '#ccc',
    strokeDashArray: [10,10],
    opacity: 1,
    width: 1,
    height: 1
});

el.visible = false;
canvas.add(el);
/* var object; */

function loadImages() {
	imgs.map((src) => { 
    fabric.util.loadImage(src, function (img) {
      let object = new fabric.Image(img);
      object.set({
          left: 100,
          top: 100,
          selectable: true
      });
      object.hasRotatingPoint = true;
      object.scaleX = object.scaleY = scale;
      canvas.add(object);
  	});	
  });
	canvas.renderAll();
}

loadImages();

canvas.on("mouse:down", function (event) {
    if (disabled) return;
    el.left = event.e.pageX - pos[0];
    el.top = event.e.pageY - pos[1];
    el.height = 1;
    el.width = 1;
    el.visible = true;
    mousex = event.e.pageX;
    mousey =...