Crop image with fabric js

  canvas, fabricjs, javascript

I tried to use this crop function (https://stackoverflow.com/a/32620703/13719420) on my fabric js application, but it seems like it don’t work with large images. What i suspect is whenever i press the button to crop the image, the image.clipTo =function(ctx)…. it’s not recognizing if i previously resized the image..

P.S: canvas is being created in other js file like so
let canvas = new fabric.Canvas("c", {
preserveObjectStacking: true
});

let mouseDown;

// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
  fill: 'rgba(255, 172, 172, 0.486)',
  stroke: '#ccc',
  strokeDashArray: [2, 2],
  visible: false
});

const container = document.getElementById('c').getBoundingClientRect();
canvas.add(rectangle);
let image;
fabric.util.loadImage("https://s3-gpmdes-new.s3.us-east-2.amazonaws.com/imagens/40172513.jpg?response-content-type=image%2Fjpeg&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA2ZIZFVAUXBK2NMLD%2F20210408%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210408T122610Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=4bb55d6a3d8c835f4edde3a3c8469aa8774796d7608c672a67158410df8be638", function(img) {
  image = new fabric.Image(img);
  canvas.add(image);
  image.set({ });
  image.selectable = false;
  canvas.renderAll();
});

// 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() {
  console.log('aloha')
  image.clipTo = function(ctx) {
      // origin is the center of the image
      var x = rectangle.left - image.getScaledWidth() / 2;
      var y = rectangle.top - image.getScaledHeight() / 2;
      ctx.rect(x, y, rectangle.width, rectangle.height);
    };
    image.selectable = true;
    disabled = true;
    rectangle.visible = false;
    canvas.renderAll();
});
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./assets/favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400;500&display=swap" rel="stylesheet">    
    <link rel="stylesheet" type="text/css" href="./index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>GPM photo editor</title>
    
</head>

<body>
    <header>
        <img src="./assets/nwsoft-logo-removebg-preview.png" alt="" id="logo-image">
        <section id="tools">
            <input type="file" name="file" id="uploadImage" class="inputfile">
            <label for="uploadImage">Upload imagem</label>
            
            <img src="./assets/crop.svg" id="cropB" alt="Recortar imagem" class="tool-button">
            <img src="./assets/right-arrow.svg" id="line-shape-arrows" alt="Desenhar flecha" class="tool-button" onclick="">
            <img src="./assets/type.svg" alt="Inserir texto" class="tool-button" onclick="addText()" id="insert-text">
            <img id="addRect" class="tool-button" type="button" value="desenha retangulo" src="./assets/rectangle.png" alt="Zoom in" onclick="addRect()">
            <img id="addLine" class="tool-button" type="button" value="Zoom ou" src="./assets/line.svg" alt="Zoom out" onclick="addLine()">
            <img id="saveImage" class="tool-button" type="button" value="Salvar imagem" src="./assets/diskette.svg" alt="Salvar imagem">
        </section>
    </header>    

    <div class="container-canvas">
        <canvas cursor: crosshair;" id="c" width="1200" height="570" ></canvas>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./scripts/fabric-new.js"></script>
    <script src="./scripts/app.js"></script>
    <script src="./scripts/key-listeners.js"></script>
    <script src="./scripts/fileSaver.js"></script>
    <script src="./scripts/crop.js"></script>
    <script src="./scripts/objects-creation.js"></script>
</body>

</html>

Source: Ask Javascript Questions

LEAVE A COMMENT