transform-image-js is a library that resizes the image within defined constraints and also allows to adjust the quality of image. One of the use cases is when you want to perform a size optimization on the image before uploading.
Using npm:
npm i @shellophobia/transform-image-js
Using yarn:
yarn add @shellophobia/transform-image-js
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/lib/transform-image-js.min.js"></script>
Using unpkg CDN:
<script src="https://unpkg.com/@shellophobia/transform-image-js/lib/transform-image-js.min.js"></script>
in CommonJS:
const transformImage = require("@shellophobia/transform-image-js")
in ES6:
import transformImage from '@shellophobia/transform-image-js';
<input id="demo" type="file" onchange="handleUpload">
function handleUpload(e){
const file = e.target.files[0];
// The library will add a property `transformImageJS` on window once you import it
const transformImage = new transformImageJS.TransformImage({maxHeight: 500, maxWidth:500, quality:0.9});
transformImage.resizeImage(file).then(res=>{
//The response returns an object that has the output blob in output attribute and has metadata for image sizes before and after transformation
console.log(res);
}).catch(err => {
// handle error
});
}
// using async function
async function handleUpload(e) {
const file = e.target.files[0];
const transformImage = new transformImageJS.TransformImage({maxHeight: 500, maxWidth:500, quality:0.9});
try {
const res = await transformImage.resizeImage(file);
console.log(res);
} catch(e) {
// handle error
}
}
import React from "react";
import transformImage from "@shellophobia/transform-image-js";
const handleUpload = async (e) => {
const file = e.target.files[0];
console.log(file);
const transformImage = new transformImage({maxHeight: 500, maxWidth:500, quality:0.9});
try {
const res = await transformImage.resizeImage(file);
console.log(res);
} catch (e) {
console.log(e);
}
}
export default function App() {
return (
<div className="App">
<input type="file" onChange={handleUpload} />
</div>
);
}
Following options can be passed during initialization of transformImage that returns an object on which methods can be called
Name | Type | Description | Default |
---|---|---|---|
sizeLimit | int | Byte size limit of the output | 16777216 // 16MB |
maxWidth | int | Max width of the output | 500 |
maxHeight | int | Max height of the output | 500 |
quality | float | A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression | 0.92 |
base64OutputType | bool | Return base64 output string in response | false |
blobOutputType | bool | Return blob output in response | true |
allowedFileTypes | []string | Array of allowed file types for uploaded file | ["jpg", "png", "jpeg"] |
Resize an image file with the configuration provided in the initialization options
Name | Type | Description |
---|---|---|
imageFile | file | The image file to resize |
Promise that resolves to the output object
Name | Type | Description |
---|---|---|
output | blob/base64 string | Blob or base64 string based on configuration |
metadata | object | Metadata about initial image dimensions and final image dimensions |
Name | Type | Description |
---|---|---|
originalHeight | int | Original image height |
originalWidth | int | Original image width |
resizedHeight | int | Resized image height |
resizedWidth | int | Resized image width |