Skip to content

shellophobia/transform-image-js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

transform-image-js

Build Status Version License minified size

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.

Getting started

Installing

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>

Usage

Import

in CommonJS:

const transformImage = require("@shellophobia/transform-image-js")

in ES6:

import transformImage from '@shellophobia/transform-image-js';

Resize image to max 500x500 with quality as 0.9:

Vanilla JS and HTML
<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
  }
}
React JSX
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>
  );
}

API

Initialization options

Description

Following options can be passed during initialization of transformImage that returns an object on which methods can be called

transformImage(options)

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"]

Methods

resizeImage(imageFile) => {Promise}

Description:

Resize an image file with the configuration provided in the initialization options

Parameters:

Name Type Description
imageFile file The image file to resize

Returns:

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
Metadata
Name Type Description
originalHeight int Original image height
originalWidth int Original image width
resizedHeight int Resized image height
resizedWidth int Resized image width

License

MIT