function ImagePreloader(imageUrls) {
var images = imageUrls.reduce(function (obj, url) {
var image = {
img: new Image()
};
image.loadingPromise = new Promise(function (resolve) {
image.img.onload = function () {
resolve(image);
};
});
image.img.src = url;
obj[url] = image;
return obj;
}, {});
this.onLoaded = function () {
return Promise.all(imageUrls.map(function (url) {
return images[url].loadingPromise;
}));
};
this.getImage = function (url) {
return images[url].loadingPromise;
};
};
var preloader = new ImagePreloader([
"http://farm4.static.flickr.com/3030/2618425424_e1d3b952ae.jpg?_=1234",
"http://farm4.static.flickr.com/3030/2618425424_e1d3b952ae.jpg?_=5678"
]);
preloader.onLoaded().then(function (images) {
console.log('all images loaded');
images.map(function(image) {
document.body.appendChild(image.img);
})
});
MongoClient.connect(url, function(err, db, sli) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = "2.png";
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '" width="328" height="526"/>');
}
};