Comments (1)
Croppr doesn't crop the image, it just provides you with the coordinates of the crop rectangle. It's up to you to do the cropping which could be done on the server side or the client side.
Here's an example of doing it on the client side with an HTML canvas.
const sourceImage = document.getElementById("sourceImage");
const croppr = new Croppr(sourceImage, {});
// When finished cropping
const cropRect = croppr.getValue();
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = cropRect.width;
canvas.height = cropRect.height;
context.drawImage(
croppr.imageEl,
cropRect.x,
cropRect.y,
cropRect.width,
cropRect.height,
0,
0,
canvas.width,
canvas.height,
);
const destinationImage = document.getElementById("destinationImage");
destinationImage.src = canvas.toDataURL();
You can do whatever else you want with the data url, such as put it in a hidden field or send it to the server over an AJAX request.
from croppr.js.
Related Issues (20)
- Race condition
- Multiple images
- Negative numbers when dragging cropping zone all the way to left and top.
- Image src String on setImage method turning into object once it goes into function HOT 1
- Bundling with webpack issues
- How to upload cropped image? HOT 4
- Cropper region as circle HOT 1
- ionic can use this ?
- <link src="path/to/croppr.css" rel="stylesheet"/> on demo site
- TypeScript typings for options
- don't work in modal ! HOT 1
- aspectRatio and minSize not working correctly HOT 1
- TypeError: this.box is undefined HOT 2
- resizing from center
- typings cause compiler errors HOT 1
- Add a setValue method HOT 2
- Multiple selection on one image HOT 1
- MinSize not working properly for clicks outside current selection HOT 1
- How to resizeTo "real" size HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from croppr.js.