Skip to content
A JavaScript tool for resizing images using HTML5 Canvas.
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.
README.md
polysize.js

README.md

Polysize

A JavaScript tool for resizing images using HTML5 Canvas.

Example to create a 150x150 avatar

// Inside a file input change event
var file = e.target.files[0];
// Create a 150 pixel sized avatar based on the image
new Polysize(file, 150, function (img) {
    console.log("Look, an image element:", img);
    // Do something with img
});

Parameters

File

  • File provided by a user (file input field, etc.)

Bounds

  • Array or integer (i.e. 75, [50, 100])
  • The pixel size of the returned image element

Callback (3rd or 4th param)

A function with a single parameter, img, which receives an image element.

Options (optional 3rd param)

  • sizing: array or string
    • Array option: [width, height]
    • "crop" (default) - maintain ratio, scale to cover bounds and crop any overlap
    • "fit" - maintain ratio and fit within size
    • "cinch" - similar to "fit", except the bounds are also cropped to match the aspect ratio of the scaled image
    • "stretch" - scale to size regardless of image stretching
  • offset: array or string
    • Centered by default
    • Array option: [x, y]
    • String options: "tl", "tc", "tr", "cl", "cr", "bl", "bc", "br"

Notes

Rails

To add Polysize to your rails project, checkout the Polysize-Rails Gem


License

MIT

You can’t perform that action at this time.