Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/csbun/resize-image

Resize images in browser using canvas
https://github.com/csbun/resize-image

canvas image resize

Last synced: 3 months ago
JSON representation

Resize images in browser using canvas

Awesome Lists containing this project

README

        

# resize-image

Resize images in browser using canvas

[![NPM](https://nodei.co/npm/resize-image.png)](https://nodei.co/npm/resize-image/)

[![Build Status](https://travis-ci.org/csbun/resize-image.svg)](https://travis-ci.org/csbun/resize-image)
[![Coverage Status](https://coveralls.io/repos/csbun/resize-image/badge.svg?branch=master&service=github)](https://coveralls.io/github/csbun/resize-image?branch=master)

## Install

### npm

```sh
npm i resize-image --save
```

### bower

```sh
bower install resize-image --save
```

## Usage

```javascript
var resizeImage = require('resize-image');

var img = new Image();
img.onload= function () {
var data = resizeImage.resize(img, 200, 100, resizeImage.PNG);
console.log(data);
};
img.src = url; // local image url
```

### .resize2Canvas(img, width, height)

resize an `` or `Image` or `` to canvas

- {Image} img: an `` or `Image()`
- {number} [width]: output image width
- {number} [height]: output image height

### .resize(img, width, height, type)

resize an `` or `Image` or `` to base64

- {Image} img: an `` or `Image()`
- {number} [width]: output image width
- {number} [height]: output image height
- {string} [type]: output image type

### types

- .PNG (default)
- .GIF
- .BMP
- .JPEG
- .WEBP

## Examples

```
yarn
npm run example
```

And visit http://localhost:9000/.