Image Cropper Online

Online Free Image Cropper for quickly help crop images in seconds without storing data in browser cache, neither making any server requests. Atrowel Image cropper lets you cut different format images as well as allows you to rotate, zoom in-out, and mirror the images. Browse or drag and drop an image from your device, use filters and refer to the guidelines to create a cropped image.

Social media post image dimensions

The below specs refer to the social media post images. All platforms support different dimension, to optimized view we need to upload image with their given best dimension. Following chart will help you to find out best dimention.

How to Crop the Image using JavaScript?

We can use Cropper.js to crop images in expected shape. With the help of the node package manager we can install the Cropper.js package.

$ npm i cropperjs

To import Cropper.js as script or as module :

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

Or

import Cropper from 'cropperjs';

Enable Cropper.js on the image or canvas element.

const cropper = new Cropper(image, {
  dragMode: 'move',
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.*);
  },
});

Another way is with the help of canvas element drawImage() method.

/* Get Canvas element */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

canvas.width  = image.width;
canvas.height = image.height;

/* Reshape / Crop Image */
ctx.drawImage(this.imageObj, 0, 0, 50, 50, 0, 0, 50, 50);

//Syntax
drawImage(
    image,
    sourceImageX,
    sourceImageY,
    sourceImageWidth,
    sourceImageHeight,
    destinationCanvasX,
    destinationCanvasY,
    destinationCanvasWidth,
    destinationCanvasHeight);

Credits

Cropper.js - JavaScript image cropper

HTML Canvas element - is used to draw graphs on a website.

ReactJs - A JavaScript library for building user interfaces.