Vanilla JS Image Cropper with Image Zoom & Pan – PureJsCropper

PureJsCropper is a lightweight, dependency-free image cropper built with vanilla JavaScript.

Features:

• Crop Area Manipulation: You can drag to reposition and dynamically resize the crop area.
• Image Manipulation: Allows you to move the original image with a mouse drag and zoom in or out with the mousewheel.
• Flexible Export: Export the final cropped image as either a base64
  Sponsored
  string or a Blob object.

How to use it:

1. Install & download.

# NPM
$ npm install pure-js-cropper

2. Import the PureJsCropper function:

<script type="module">
  import PureJsCropper from "./PureJsCropper.js";
</script>

3. Create a container element in your HTML where the cropper will live. You’ll also need a button to trigger the crop action and an <img> tag to display the result.

<div id="cropper"></div>
<button id="cropBtn">Crop (base64)</button>
<button id="cropBtnBlob">Crop (Blob)</button>
<img id="result" />

4. Create a new instance of PureJsCropper and load an image.

// Target the container div
const cropperContainer = document.getElementById("cropper");

// Instantiate the cropper
const cropper = new PureJsCropper(cropperContainer, {
  width: "100%", // Make it responsive
  height: "400px",
});

// Load the image you want to crop
cropper.loadImage("path/to/your/image.jpg");

5. The crop() method is what you’ll use to get the final image. By default, it returns a base64 string, which is useful for directly setting the src of an <img> tag.

document.getElementById("cropBtn").addEventListener("click", () => {
  const base64String = cropper.crop();
  document.getElementById("result").src = base64String;
});

6. Pass false to the crop() method if you need a Blob object. This will return a Promise that resolves with the Blob.

document.getElementById("cropBtnBlob").addEventListener("click", () => {
  cropper.crop(false).then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    document.getElementById("result").src = objectURL;
    // Now you can use the 'blob' object to upload
  });
});

7. Customize the initial appearance and constraints of the crop box by passing an options object during instantiation.

const cropper = new PureJsCropper(cropperContainer, {
  width: "300px",
  height: "300px",
  border: "1px dashed #53535c",
  minCropBoxWidth: 30,
  minCropBoxHeight: 30
});

Related Resources:

• 10 Best Image Croppers In jQuery And Vanilla JavaScript

The post Vanilla JS Image Cropper with Image Zoom & Pan – PureJsCropper appeared first on CSS Script.