pure-js-cropper
Version:
A lightweight, dependency-free image cropper built with **vanilla JavaScript**. Easily integrate cropping functionality into your web apps without needing heavy frameworks or external libraries.
42 lines (37 loc) • 1.39 kB
HTML
<!-- This file is for testing purposes only.-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="cropper"></div>
<button id="cropBtn">Crop (base64)</button>
<button id="cropBtnBlob">Crop (Blob)</button>
<br />
<img id="result" />
<script type="module">
import PureJsCropper from "../PureJsCropper.js";
const cropper = new PureJsCropper(document.getElementById("cropper"), {
width: "400px",
height: "",// no height for auto scale
//zoomStep: 0.2
});
cropper.loadImage("cups.jpg");
document.getElementById("cropBtn").addEventListener("click", () => {
const cropped = cropper.crop();
document.getElementById("result").src = cropped;
console.log('Cropped image in base64 output');
});
document.getElementById("cropBtnBlob").addEventListener("click", () => {
cropper.crop(false).then((blob) => {
const url = URL.createObjectURL(blob);
document.getElementById("result").src = url;
console.log('Cropped image in Blob output');
});
});
</script>
</body>
</html>