get-media-size
v2.0.1
Published
Get the real size of an <img>, <video>, or <canvas> in the browser.
Downloads
8
Maintainers
Readme
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 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