Image cropping support / documentation #3
Comments
|
Yes, you can do this — we'll be adding documentation shortly. See the following example: <html>
<head>
<script src="https://js.upload.io/upload-js/v1"></script>
<script>
const upload = new Upload({
// Replace with your API key. (Get from: https://upload.io/)
apiKey: "..."
});
// Step 1: Wait for the original file to upload...
const onOriginalImageUploaded = ({ fileId, fileUrl: originalImageUrl }) => {
// Step 2: Create your crop metadata.
const crop = {
// Type definition: https://github.com/upload-js/upload-image-plugin/blob/86eaf65f31c56806ea31d498a3f3a9aed99d71eb/src/types/ParamsFromFile.ts
input: fileId,
pipeline: {
steps: [
{
geometry: {
offset: {
x: 20,
y: 40
},
size: {
width: 200,
height: 100,
type: "widthxheight!"
}
},
type: "crop"
}
]
}
}
// Step 3: Turn crop metadata into a BLOB.
const blob = new Blob([JSON.stringify(crop)], {type: "application/json"});
// Step 4: Upload the crop metadata.
upload
.uploadFile({
file: {
name: `${fileId}_cropped.json`, // Can be anything.
type: blob.type,
size: blob.size,
slice: (start, end) => blob.slice(start, end)
}
})
.then(
// Step 5: Wait for the crop metadata to upload...
({ fileUrl: croppedImageUrl }) => {
// Step 6: Get the cropped image by appending an image transformation slug (e.g. '/jpg') to the crop metadata file's URL.
// Note: '/jpg' is only illustrative -- you must use a transformation slug you've configured in the Upload Dashboard.
alert(`Original image:\n${originalImageUrl}\n\nCropped image:\n${croppedImageUrl}/jpg`)
},
e => console.error(e)
);
};
const uploadFile = upload.createFileInputHandler({
onUploaded: onOriginalImageUploaded
});
</script>
</head>
<body>
<input type="file" onchange="uploadFile(event)" />
</body>
</html>Produces the following result:
(The last URL is a 200x100 crop of the first URL.) Note: with this approach you can reuse the same original file with multiple different crops (say if the user later changes their mind on the cropping dimensions), so you don't need to keep re-uploading the same original image. We're looking to provide a UI component that provides this entire flow out-the-box. |
|
Documentation updated — closing this issue 🙂 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is it possible for Upload.js to crop images?
I've read the documentation but couldn't find anything -- presumably it would start with me prompting the user for some image cropping dimensions, and then associating them with the uploaded image somehow (but I'm just guessing). Does Upload.js / upload.io support it?
Appreciate any help! 🙏
The text was updated successfully, but these errors were encountered: