Skip to content
Resize your Image object or image inputs easily
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
.gitignore
ImageResize.js
ImageResize.min.js
LICENSE
README.md
package.json

README.md

ImageResize (Demo)

Resize your Image object or image inputs easily

Doc

  • Installation

Simply import ImageResize into your HTML.


<script src="https://unpkg.com/@zenoo/image-resize@0.1.1/ImageResize.min.js"></script>
  • How to use

Create a new ImageResize object:

// Empty image processor
const resizer = new ImageResize()
	.maxWidth(200)
	.process('yourImageURL')
	.then(resizedImage => {
		document.body.appendChild(resizedImage);
	});

// OR

// Processor linked to a file input
const resizer = new ImageResize({
	source: document.querySelector('input.image'),
	maxWidth: 50,
	maxHeight: 50,
	onResize: resizedImage => {
		document.body.appendChild(resizedImage);
	}
});
  • Options
{
  source: yourImage,            // Your file input (String selector or Element)
  maxWidth: 50,                 // Max width
  maxHeight: 50,                // Max height
  width: 50,                    // Fixed width (You'll usually use either maxWidth or width)
  height: 50,                   // Fixed height (You'll usually use either maxHeight or height)
  keepAspectRatio: true,        // Should the new image keep its aspect ratio ?
  onResize: resizedImage => {   // Callback called after every resize
    document.body.appendChild(resizedImage);
  }
}
  • Methods

See the documentation for the method definitions.

  • Example

See this JSFiddle for a working example

Authors

You can’t perform that action at this time.