Load one or more images, return a promise. Only 0.4KB, for the browser, no dependencies.
It can be used in two ways:
-
given a URL, generate an
<img>
and wait for it to load:loadImage('img.jpg').then(/*it's loaded!*/)
-
given an
<img>
, wait for it to load:const img = document.querySelector('img.my-image'); loadImage(img).then(/*it's loaded!*/)
Pick your favorite:
<script src="dist/image-promise.min.js"></script>
npm install --save image-promise
var loadImage = require('image-promise');
import loadImage from 'image-promise';
loadImage(image)
will return a Promise that resolves when the image load, or fails when the image
var image = 'cat.jpg';
// var image = $('img')[0]; // it can also be an <img> element
loadImage(image)
.then(function (img) {
ctx.drawImage(img, 0, 0, 10, 10);
})
.catch(function () {
console.error('Image failed to load :(');
});
image-promise
can load multiple images at a time
var images = ['cat.jpg', 'dog.jpg'];
// var images = $('img'); // it can also be a jQuery object
// var images = document.querySelectorAll('img'); // or a NodeList
loadImage(images)
.then(function (allImgs) {
console.log(allImgs.length, 'images loaded!', allImgs);
})
.catch(function (err) {
console.error('One or more images have failed to load :(');
console.error(err.errored);
console.info('But these loaded fine:');
console.info(err.loaded);
});
loadImage(image, attributes)
lets you pass as the second argument an object of attributes you want to assign to the image element before it starts loading.
This is useful for example when you need CORS enabled image, where you need to set the attribute crossorigin="anonymous"
before the image starts downloading.
var image = 'http://catpics.com/cat.jpg';
loadImage(image, { crossorigin: 'anonymous' })
.then(function (img) {
ctx.drawImage(img, 0, 0, 10, 10);
// now you can do this
canvas.toDataURL('image/png')
})
.catch(function () {
console.error('Image failed to load :(');
});
None! But you need to polyfill window.Promise
in IE11 and lower.
MIT © Federico Brigante