@bicycle-codes/image-cropper
v0.0.1
Published
[](README.md) [](README.md) [
const img = document.getElementById('my-image')
cropper.setImage(img)
Public Functions
ImageCropper(canvas, x, y, width, height, keepAspect, touchRadius):void
Constructor function that initializes the image cropper.
| Parameter | Description | | ------ | ----------- | | canvas | The canvas element that the cropping tool will display on.| | x | Optional: The left position of the crop area. | | y | Optional: The top position of the crop area.| | width | Optional: The initial width of the crop area.| | height | Optional: The initial height of the crop area. | | keepAspect | Optional: Enforces that the aspect ratio is kept when dragging the crop area. The aspect ratio is defined by the width and height paramater. | | touchRadius | Optional: The radius for detecting touches/clicks on the corner drag markers and the centre drag marker. |
getCroppedImage(fillWidth, fillHeight):Image
Returns an image that is cropped from the source image based on the crop area. If no fillWidth and fillHeight is set the image will be a 1:1 crop. If fillWidth and fillHeight are set the cropped image will scale to fit. It is recommended to ensure the fillWidth and fillHeight are set to the same aspect ratio as the crop area to prevent distortion.
| Parameter | Description | | ------ | ----------- | | fillWidth| Optional: The fill width that the cropped area will map to.| | fillHeight| Optional: The fill height that the cropped area will map to. |
setImage(image)
Set the image for the image cropper.
| Parameter | Description | | ------ | ----------- | | image| The image that will be used for cropping.
isImageSet():boolean
Checks to see if an image has been set.
getCropBounds():Bounds
Returns the bounds (left, right, top, bottom) of the crop area relative to the original source image.
Example code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Image Cropper Test</title>
</head>
<body>
<div>
Select image to crop: <input type="file" id="fileInput" name="file" multiple="" />
</div>
<div>
<canvas id="imageCanvas" width="600" height="400" style="border:0px solid #000000;">
</canvas>
</div>
<div>
Cropped image:
</div>
<div id="preview"></div>
<script src="ImageCropperTest.js"></script>
<script src="ImageCropper.js"></script>
</body>
</html>
ImageCropperTest.js
let crop;
window.onload = function () {
const canvas = document.getElementById("imageCanvas");
const width = 600;
const height = 300;
crop = new ImageCropper(
canvas,
canvas.width / 2 - width / 2,
canvas.height / 2 - height / 2,
width,
height,
true
);
window.addEventListener('mouseup', preview);
};
function preview () {
if (crop.isImageSet()) {
const img = crop.getCroppedImage(400, 200);
img.onload = (function () { return previewLoaded(img); });
}
}
function previewLoaded (img) {
if (img) {
document.getElementById("preview").appendChild(img);
}
}
function handleFileSelect (evt) {
const file = evt.target.files[0];
const reader = new FileReader();
const img = new Image();
//listener required for FireFox
img.addEventListener("load", function () {
crop.setImage(img);
preview();
}, false);
reader.onload = function () {
img.src = reader.result;
};
if (file) {
reader.readAsDataURL(file);
}
}
develop
Start a local server of the example directory:
npm start
License
MIT license. See the LICENSE file.