https://github.com/fregante/get-media-size

Get the real size of an <img>, <video>, or <canvas> in the browser.
https://github.com/fregante/get-media-size

Last synced: 2 months ago
JSON representation

Get the real size of an <img>, <video>, or <canvas> in the browser.

• Host: GitHub
• URL: https://github.com/fregante/get-media-size
• Owner: fregante
• License: mit
• Created: 2015-08-17T00:10:57.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-07-24T10:00:14.000Z (almost 5 years ago)
• Last Synced: 2024-04-17T15:08:33.031Z (2 months ago)
• Language: JavaScript
• Homepage: http://npmjs.com/package/get-media-size
• Size: 15.6 KB
• Stars: 12
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Lists

• awesome-micro-npm-packages - get-media-size - Get the original size of any `img`/`video`/`svg`/`canvas` tags or canvas context. (Modules / Browser)

README

        
# get-media-size

> Get the real size of an ``, ``, or `` in the browser.

[![gzipped size](https://badges.herokuapp.com/size/github/fregante/get-media-size/master/dist/get-media-size.browser.js?gzip=true&label=gzipped%20size)](#readme)

[![Travis build status](https://api.travis-ci.org/fregante/get-media-size.svg?branch=master)](https://travis-ci.org/fregante/get-media-size)

[![npm version](https://img.shields.io/npm/v/get-media-size.svg)](https://www.npmjs.com/package/get-media-size)

It works in IE9+ since it depends on `naturalWidth`/`naturalHeight` for the images and `videoWidth`/`videoHeight` on videos.

## Install

```sh

npm install --save get-media-size

```

```js

import loadImage from 'get-media-size';

```

If you don't use node/babel, include this:

```html

```

## Usage

### Async usage

Use this on images or videos that might not yet be loaded. It only needs a few KB of the media to be loaded, so you'll get the size long before its `load` event.

```js

var video = document.querySelector('video');

getMediaSize(video).then(console.log)

//==> Promise resolves with {width: 1280, height: 720}

```

### Sync usage

Use this on `canvas` or media that is already loaded, otherwise it'll return `{width: 0, height: 0}`

#### Example with images or videos

```js

var img = document.querySelector('img');

console.log(img.complete, getMediaSize.sync(img));

//==> true, {width: 275, height: 95}

```

#### Example with canvas

```js

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var canvasSize = getMediaSize.sync(canvas); // it works with either the canvas element

var canvasSize = getMediaSize.sync(ctx); // or the context object

```

## API

### `getMediaSize(media[, scale])`

parameter | description

--- | ---

**`media`** | Type: `image` or `video` or `canvas` or `context`, *required* 
 The element to read the size from

**`scale`** | Type: `number`  *default:1* 
 Convenience feature to transform the size if you're using retina canvas, for example. Optional.

`@returns` | Type: `Promise` 
Resolves with an object with `width` and `height` of the passed media

### `getMediaSize.sync(media[, scale])`

parameter | description

--- | ---

**`media`** | Matches the `getMediaSize()` function

**`scale`** | Matches the `getMediaSize()` function

`@returns` | Type: `object` 
With `width` and `height` of the passed media

## Dependencies

None! But for the _async_ method you need to polyfill `window.Promise` in IE9-11

## License

MIT © [Federico Brigante](https://bfred.it)