shellophobia/transform-image-jsPublic

NotificationsYou must be signed in to change notification settings
Fork2
Star15

JS library to transform the image

shellophobia.github.io/uploadresizeimage.html

License

MIT license

15 stars 2 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
.github/workflows		.github/workflows
dist		dist
jquery_plugin		jquery_plugin
lib		lib
src		src
.babelrc		.babelrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
gulpfile.js		gulpfile.js
index.js		index.js
package.json		package.json
webpack-gen-config.js		webpack-gen-config.js

Repository files navigation

transform-image-js

transform-image-js is a library to perform transformations on an image file e.g. resize an 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:

<scriptsrc="https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/lib/transform-image-js.min.js"></script>

Using unpkg CDN:

<scriptsrc="https://unpkg.com/@shellophobia/transform-image-js/lib/transform-image-js.min.js"></script>

Usage

Import

in CommonJS:

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

in ES6:

importtransformImagefrom'@shellophobia/transform-image-js';

Resize image to max 500x500 with quality as 0.9:

Vanilla JS and HTML

<inputid="demo"type="file"onchange="handleUpload">

functionhandleUpload(e){constfile=e.target.files[0];// The library will add a property `transformImageJS` on window once you import itconsttransformImage=newtransformImageJS.TransformImage({});transformImage.resizeImage(file,{maxHeight:500,maxWidth:500,quality:0.9}).then(res=>{//The response returns an object that has the output blob in output attribute and has metadata for image sizes before and after transformationconsole.log(res);}).catch(err=>{// handle error});}// using async functionasyncfunctionhandleUpload(e){constfile=e.target.files[0];consttransformImage=newtransformImageJS.TransformImage({});try{constres=awaittransformImage.resizeImage(file,{maxHeight:500,maxWidth:500,quality:0.9});console.log(res);}catch(e){// handle error}}

React JSX

importReactfrom"react";importtransformImagefrom"@shellophobia/transform-image-js";consthandleUpload=async(e)=>{constfile=e.target.files[0];console.log(file);consttransformImage=newtransformImage({});try{constres=awaittransformImage.resizeImage(file,{maxHeight:500,maxWidth:500,quality:0.9});console.log(res);}catch(e){console.log(e);}}exportdefaultfunctionApp(){return(<divclassName="App"><inputtype="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	the byte size limit for the input file/blob	16777216 bytes = 16MB
outputType	enum	defines the output object format. Allowed values :- blob/base64/file	blob
allowedFileTypes	[]string	allowed types for the input file/blob e.g. PNG, JPEG, JPG	["jpg", "png", "jpeg"]

Methods

`resizeImage(imageFile, options, fileName) => {Promise}`

Description:

Resize an image file

Parameters:

Name	Type	Description	Required	Default
image	File/Blob	File object / Blob to be resized	Yes	N/A
options	Object	Additional options described below. The values can also override the TransformImage options	No	{}
fileName	string	Name of the file if outputType is file (Optional)	No	""

Options

Name	Type	Description	Default
maxWidth	int	the max width for the file in px	500
maxHeight	int	the max height for the file in px	500
quality	float	a value between 0 and 1 to denote the quality of the output image	0.9

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

JQuery Plugin

image_compress_plugin is a jquery plugin that allows to add a file upload and compress functionality.

Usage

Importing

<scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/jquery_plugin/image_compress_plugin.js"></script>

Example

<p>This is a demo for the resize image jquery plugin. Feel free to go through the source code<ahref="https://github.com/shellophobia/UploadCompressImage/blob/master/jquery_plugin/image_compress_plugin.js">here</a></p><divid="fileinput"><buttonclass="btn-upload"><iclass="fas fa-cloud-upload-alt"></i> Click Here to Upload</button><pclass="drag-p">Or Drag N Drop the file</p><inputtype="file"multiple="true"></div><divid="preview"></div><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/jquery_plugin/image_compress_plugin.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#fileinput").uploadFile({enablePreview:true,appendFileInput:false,autoSubmit:false,previewSelector:"#preview"});});</script>