get-media-size

2.0.1 • Public • Published

get-media-size

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

gzipped size Travis build status npm version

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
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

Dependencies (0)

    Dev Dependencies (5)

    Package Sidebar

    Install

    npm i get-media-size

    Weekly Downloads

    2

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • fregante