Cropping image on canvas

Cropping an image nowadays is a widespread requirement for the website. Many libraries in Javascript will help us to do this with many options like Jcrop and cropper are a few renowned libraries.

However, this library will help you select the portion of the image either in rectangular or square shape (aspect ratio=> 1:1), depending on the aspect ratio you want to provide. It will also provide you with some locations like x and y coordinates. Eventually, we can extract the image from the original one. Here, extracting means we will redraw the image.

HTML Canvas

Canvas is like a white art paper where we can draw image. To draw an image there is one function named drawImage()

Step 1: Create a canvas using HTML

Step 2: Create a drawing environment

When you call canvas.getContext('2d'), you're obtaining a 2D rendering context object that provides methods and properties for drawing and manipulating content on the canvas. This context is essentially your toolbox for creating graphics.

So basically, it is creating an environment, where many drawing options will be enabled.

Step 3: Create an Image object

Step 4: Now use drawImage()

img.onload = function() {
    // Basic drawImage: draw the entire image at (10, 10)
    ctx.drawImage(img, 10, 10);
  }

I have a canvas, of 300 * 300, below the original image

So, it will start from the top left, and then 10 by 10.

Another option

ctx.drawImage(img, 30, 20, 200, 150);

Explanation:

Another most complex option:

ctx.drawImage(img, 50, 50, 200, 100, 
      0, 0, 200, 100
    );

Explanation

It will take the output image from the original image's (50,50) location at a scale of (200, 100). And the second line mentions, in the canvas. it will put the taken image from the beginning (0,0) location at a scale of (200, 100)

Let us try another example

Let us put the calculated image in the exact location from the location, it got cropped.

    ctx.drawImage(img, 50, 50, 200, 100, 
      50, 50, 200, 100
    );

From this above example, I think we will get a clearer picture.

One point to take note is that the original image is rendered with 300*300 as the height and width.

Conclusion

The drawImage method is designed to render specific parts of an image rather than remove them. Since it operates on pixel coordinates, accurately determining these coordinates is crucial for precise cropping. However, manually finding these values can be error-prone. This is where JavaScript cropping libraries, such as Jcrop and Cropper.js, prove invaluable by simplifying the process and ensuring accurate results.

Let me know if you'd like any further refinements! 🚀