Skip to content

fregante/get-media-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published