Gathering detailed insights and metrics for @bicycle-codes/image-cropper
Gathering detailed insights and metrics for @bicycle-codes/image-cropper
An image cropper for HTML5. Supports rectacle shapes, aspect ratios and zooming.
0.0.1
MIT
TypeScript
275.71 kB
Installations
npm install @bicycle-codes/image-cropperDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
21.2.0
NPM Version
10.2.5
Releases
Unable to fetch releases
Languages
3
TypeScript
JavaScript
HTML
TypeScript (91.96%)
JavaScript (6.45%)
HTML (1.59%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
43 Commits
3 Branches
1 Contributors
Updated on Jun 03, 2024
Maintainers
1
Package Meta Information
Latest Version
0.0.1
Package Id
@bicycle-codes/image-cropper@0.0.1
Unpacked Size
275.71 kB
Size
52.18 kB
File Count
12
NPM Version
10.2.5
Node Version
21.2.0
Published on
May 26, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Image Cropper
An HTML5 image cropping tool. Features a rectangular crop area. The crop area's aspect ratio can be enforced during dragging. The crop image can either be 1:1 or scaled to fit an area. Also supports multitouch on touch supported devices.
fork
This is a fork of AllanBishop/ImageCropper, just packaging and exporting ergonomically for npm consumption.
Thanks Allan Bishop for working in the world of open source.
Screenshot
Live demo
install
1npm i -S @bicycle-codes/image-cropper
Add files
copy
Copy to a location accessible by your web server
1cp ./node_modules/@bicycle-codes/image-cropper/dist/index.min.js ./public/image-cropper.js
Add the script to your application.
1<script src="/image-cropper.js"></script>
bundle
This is ergonomic to use with a JS bundler such as vite. Just import:
1import { ImageCropper } from '@bicycle-codes/image-cropper'
Or import a minified file:
1import { ImageCropper } from '@bicycle-codes/image-cropper/min'
example
Given HTML like this
1<canvas id="the-canvas" width="600" height="400"> 2 An alternative text describing what your canvas displays. 3</canvas>
In your JS code,
1import { ImageCropper } from '@bicycle-codes/image-cropper'
2
3const width = 600
4const height = 300
5const cropper = new ImageCropper(
6 canvas, // <-- HTML canvas element
7 canvas.width / 2 - width / 2, // <-- left postition of crop area
8 canvas.height / 2 - height / 2, // <-- top position of crop area
9 width, // <-- initial width of the crop area
10 height, // <-- initial height of the crop area
11 true // <-- Keep the aspect ratio to the given width and height
12)
13
14const img = document.getElementById('my-image')
15cropper.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
1<!DOCTYPE html> 2<html> 3<head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Image Cropper Test</title> 6 </head> 7 <body> 8 <div> 9 Select image to crop: <input type="file" id="fileInput" name="file" multiple="" /> 10 </div> 11 <div> 12 <canvas id="imageCanvas" width="600" height="400" style="border:0px solid #000000;"> 13 </canvas> 14 </div> 15 16 <div> 17 Cropped image: 18 </div> 19 20 <div id="preview"></div> 21 22 <script src="ImageCropperTest.js"></script> 23 <script src="ImageCropper.js"></script> 24 </body> 25</html>
ImageCropperTest.js
1let crop;
2window.onload = function () {
3 const canvas = document.getElementById("imageCanvas");
4 const width = 600;
5 const height = 300;
6
7 crop = new ImageCropper(
8 canvas,
9 canvas.width / 2 - width / 2,
10 canvas.height / 2 - height / 2,
11 width,
12 height,
13 true
14 );
15
16 window.addEventListener('mouseup', preview);
17};
18
19function preview () {
20 if (crop.isImageSet()) {
21 const img = crop.getCroppedImage(400, 200);
22 img.onload = (function () { return previewLoaded(img); });
23 }
24}
25
26function previewLoaded (img) {
27 if (img) {
28 document.getElementById("preview").appendChild(img);
29 }
30}
31
32function handleFileSelect (evt) {
33 const file = evt.target.files[0];
34 const reader = new FileReader();
35 const img = new Image();
36
37 //listener required for FireFox
38 img.addEventListener("load", function () {
39 crop.setImage(img);
40 preview();
41 }, false);
42
43 reader.onload = function () {
44 img.src = reader.result;
45 };
46
47 if (file) {
48 reader.readAsDataURL(file);
49 }
50}develop
Start a local server of the example directory:
1npm start
License
MIT license. See the LICENSE file.
No vulnerabilities found.
No security vulnerabilities found.