Awesome

get-media-size

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

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

Install

npm install --save get-media-size

import loadImage from 'get-media-size';

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

<script src="dist/get-media-size.browser.js"></script>

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.

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

var img = document.querySelector('img');
console.log(img.complete, getMediaSize.sync(img));
//==> true, {width: 275, height: 95}

Example with canvas

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 <br> The element to read the size from
`scale`	Type: `number` default:1 <br> Convenience feature to transform the size if you're using retina canvas, for example. Optional.
`@returns`	Type: `Promise` <br>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` <br>With `width` and `height` of the passed media

Dependencies

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