Get the real size of an (already-loaded)
<img>,<video>, or<canvas>in the browser.
On images:
var img = new Image();
img.onload = function () {
console.log(getMediaSize(img));
//==> {width: 275, height: 95}
};
img.src = 'http://www.google.com/images/logo.png';On videos
var video = document.createElement('video')
video.onloadedmetadata = function () {
console.log(getMediaSize(video));
//==> {width: 854, height: 480}
};
video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';On canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var canvasSize = getMediaSize(canvas); // it works with either the canvas element
var canvasSize = getMediaSize(ctx); // or the context objectnpm install --save get-media-sizevar getMediaSize = require('get-media-size');| 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: object With width and height of the passed media |
Here's an explanation of the files included in this repo
index.js: source file, in ES6dist/get-media-size.min.js: browser-ready file with AMD or a global variable calledgetMediaSizedist/get-media-size.node.js: used by node/browserify withrequire('get-media-size')
No dependencies. It works in IE9+ since it depends on naturalWidth/naturalHeight for the images and videoWidth/videoHeight on videos.
MIT © Federico Brigante