react-images-trimming-tool-tb
is a React package designed to simplify image trimming by using the canvas
HTML element and allowing users to create selections directly on the image .
It eliminates the need for multiple backend trimming operations, reducing API calls, S3 storage usage, and associated costs.
- Interactive Image Trimming: Enables users to select and trim images directly in the browser using the mouse.
-
Efficient Rendering: Uses
img
tags for rendering images andcanvas
for trimming operations. - Cost Optimization: Reduces API calls and minimizes cloud storage usage by trimming images client-side.
- Customizable: Offers flexibility to handle multiple image trimming operations seamlessly.
Install the package using npm or yarn:
npm install react-images-trimming-tool-tb
Or
yarn add react-images-trimming-tool-tb
Here’s a basic example of how to use the package:
import React, { useState } from 'react';
import ImagesTrimmingTool from 'react-images-trimming-tool-tb';
const App = () => {
const handleSave = ({ trimSections, canvasRefs }) => {
console.log("Trim Sections:", trimSections);
console.log("Canvas References:", canvasRefs);
};
return (
<div>
<h1>React Images Trimming Tool</h1>
<ImagesTrimmingTool
images=["https://example.com/sample-image.jpg"]
onSave={handleSave}
/>
</div>
);
};
export default App;
For accurate results, ensure that all images inside the array have the exact same widths.
{
startY: 10, // Starting Y coordinate of the selection
endY: 40, // Ending Y coordinate of the selection
imageIndex: 0, // Index of the image in the images array
id: 185545 // Unique identifier for the trim section
}
The trimSections
object received in the onSave
callback corresponds to the actual dimensions of the image, not the rendered image size (which defaults to 400px
or the value set in the width
prop).
This means that all coordinates (startX
, startY
, endX
, endY
) are calculated relative to the original image size, ensuring accurate trimming when applied on the original image.
If the actual image width is 800px
and you provide the width
prop as 400px
(which is the default):
- Rendered image: 400px width
- Actual image: 800px width
Let’s say you select a section with the following coordinates on the rendered image:
- startY: 10
- endY: 40
These coordinates represent the rendered image of 400px. However, since the actual image width is 800px, the coordinates will be scaled based on the ratio of the actual image width to the rendered image width.
-
Scale factor =
800 / 400 = 2
This means that the same section in the actual image will have the following coordinates:
-
startY:
10 * 2 = 20
-
endY:
40 * 2 = 80
So, the coordinates in the callback will be for the actual image size, ensuring accurate trimming when applied to the original image.
Prop | Type | Required | Default | Description |
---|---|---|---|---|
images |
array |
Yes | [] |
Array of image URLs to load into the trimming tool. |
onSave |
function |
No | () => {} |
Callback function triggered when saving trims. |
onTrim |
function |
No | () => {} |
Callback function triggered when a trimming operation is performed. |
onRevert |
function |
No | () => {} |
Callback function triggered when reverting a trimming operation. |
width |
number |
No | 400 |
Width of the image to be rendered. |
selectionColor |
string |
No | 'rgba(255, 0, 0, 0.3)' |
Background color for inactive selections. |
selectionBorder |
string |
No | '2px dotted red' |
Border style for inactive selections. |
activeSelectionColor |
string |
No | 'rgba(0, 0, 255, 0.3)' |
Background color for the active selection. |
activeSelectionBorder |
string |
No | '1px solid pink' |
Border style for the active selection. |
For any questions or feedback, feel free to reach out via tusharbhatt0135@gmail.com
.