https://github.com/nemtsov/tiny-canvas-image-scaler

Canvas-based image-scaling utility.
https://github.com/nemtsov/tiny-canvas-image-scaler

canvas image javascript scaling

Last synced: 3 days ago
JSON representation

Canvas-based image-scaling utility.

• Host: GitHub
• URL: https://github.com/nemtsov/tiny-canvas-image-scaler
• Owner: nemtsov
• License: apache-2.0
• Created: 2017-02-23T20:04:46.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-03-13T12:22:10.000Z (almost 6 years ago)
• Last Synced: 2024-04-25T04:02:36.107Z (9 months ago)
• Topics: canvas, image, javascript, scaling
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 1
• Watchers: 25
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tiny Canvas Image Scaler [![Build Status](https://img.shields.io/travis/behance/tiny-canvas-image-scaler.svg)](http://travis-ci.org/behance/tiny-canvas-image-scaler) [![NPM version](https://img.shields.io/npm/v/tiny-canvas-image-scaler.svg)](https://www.npmjs.com/package/tiny-canvas-image-scaler)

The purpose of this library is to be the smallest canvas-based image-scaling utility.

## Usage

```js

var imageScaler = require('tiny-canvas-image-scaler')

var options = {

  maxWidth: 300

};

imageScaler.getScaledUrl(imageUrl, options).then((scaledUrl) => {

  const image = document.getElementById('my_image');

  image.src = scaledUrl;

});

```

```js

var imageScaler = require('tiny-canvas-image-scaler')

var options = {

  maxWidth: 200

};

imageScaler.getScaledCanvas(imageUrl, options).then((canvas) => {

  const container = document.getElementById('container');

  container.appendChild(canvas);

});

```

#### Options:

  - `width` - to scale to (height will adjust proportionally)

  - `canvas` - canvas DOM node that will be used to perform the scaling (one will be created, if not provided)

  - `imageSmoothingEnabled` - property of the canvas context

  - `imageSmoothingQuality` - property of the canvas context

  - `imageFormat` - String, `.toDataURL(imageFormat)`, defaults to `image/png`

  - `imageQuality` - Number, `.toDataURL(imageFormat, imageQuality)`, defaults to `0.92`

## Browser Support

All evergreen browsers plus IE11.

## License

[Apache-2.0](/LICENSE)