I have my main function which calls my loadtexture function that loads two images and returns a base64 encode of the combined image but it keeps skipping my onload functions when it's trying to load the images.
$(document).ready(function () {
var modelPath = "models/testhiddenUV.obj";
var texture = loadTexture();
loadModel(texture, modelPath, "designCanvas");
});
function loadTexture() {
var frontImage = new Image();
var backImage = new Image();
var canvas = document.getElementById("designCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFF";
ctx.fillRect(0,0,1024,1024);
//skips whole onload functions to the end
frontImage.onload = function() {
frontImage.src = "models/wine.jpg";
ctx.drawImage(frontImage,0,0);
backImage.onload = function() {
backImage.onload = "models.petro21.jpg";
ctx.drawImage(backimage, 804, 0);
return canvas.toDataUrl("image/png");
}
}
To me the code looks right and should execute, am I missing something with the onload function? Why does it skip those lines of code?
.onload
is an asynchronous call-back. And you have to call it in order for it to run.
So basically:
frontImage.onload = function() {
ctx.drawImage(frontImage,0,0);
}
frontImage.src = URL.createObjectURL("models/wine.jpg");
backImage.onload = function() {
ctx.drawImage(backimage, 804, 0);
}
backImage.src = URL.createObjectURL("whateverURIyouhave");
I am trying to make really simple image loader for my game but I can't find out why this isn't working.. Here is my code:
window.onload = function() {
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var images = [];
function loadImages(imageFiles) {
var loadedImages = [];
for(var i = 0; i < imageFiles.length; i++) {
var image = new Image();
image.onload = function() {
alert("Loaded");
}
image.src = imageFiles[i];
loadedImages[i] = image;
}
return loadedImages;
}
function init() {
images = loadImages(['img/1.png', 'img/2.png']);
main();
}
function main() {
ctx.drawImage(images[1], 0,0);
}
init();
}
All I see is blank canvas without an image.
Use Promise, The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.
Promise.all(), The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved.
function loadImages(imageFiles) {
var promiseArr = [];
for (var i = 0; i < imageFiles.length; i++) {
var eachPromise = new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
alert('Loaded!');
resolve();
}
image.src = imageFiles[i];
});
promiseArr.push(eachPromise);
}
return promiseArr;
}
function init() {
var AllImages = ['https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.2-5643440998055936-ror.jpg', 'https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.3-5700735861784576-ror.jpg'];
var allPromises = loadImages(AllImages);
Promise.all(allPromises).then(function() {
alert('All Loaded');
main();
});
}
function main() {}
init();
try replacing
image.onload = function() {
alert("Loaded");
}
with
if(i==1){
image.onload = function() {
main();
}}
when the second image is loaded, your function is called
then edit the code to suit your needs
I will edit more in a while
Images are loaded asynchronously so when you try to read the file in main, the image still is loading. So you need to wait until all the images are loaded.
window.addEventistener("load", function() {
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var images = [];
function loadImages(imageFiles, completeFnc) {
var loadedImages = [],
loadedCnt = 0;
for(var i = 0; i < imageFiles.length; i++) {
var image = new Image();
image.onload = function() {
loadedCnt++; //increment the count
if(loadedCnt==imageFiles.length) { //if count equals total, fire off callback
completeFnc();
}
};
image.onerror = function () {
alert("There was a problem loading the images");
};
image.src = imageFiles[i];
loadedImages[i] = image;
}
return loadedImages;
}
function init() {
images = loadImages(['img/1.png', 'img/2.png'], main);
}
function main() {
ctx.drawImage(images[1], 0,0);
}
init();
});
This should work better
var images = ['img/1.png', 'img/2.png'], loadedImages = [], canvas,ctx, idx=0:
function main() {
ctx.drawImage(images[1], 0, 0);
}
function loadImages() {
if (loadedImages.length == images.length) {
main();
return;
}
var image = new Image();
image.onload = function() {
loadedImages.push(this);
loadImages();
idx++;
}
image.src = imageFiles[idx];
}
function init() {
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');
loadImages();
}
window.onload = function() {
init();
}
You need to push items into an array. Replace
loadedImages[i] = image;
with
loadedImages.push(image);
UPDATED
I have an HTML code below:
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
I have a function below:
var Context;
function onSign(canvas){
var ctx = document.getElementById(canvas).getContext('2d');
SigWebSetDisplayTarget(ctx);
tmr = setInterval(SigWebRefresh, 50);
}
function SigWebSetDisplayTarget( obj ){
Context = obj;
}
I called the function OnSign twice with different canvas id parameters.
OnSign('canvas1');
OnSign('canvas2');
Below is the SigWebRefresh function that is repeatedly called for a reason.
function SigWebRefresh(){
xhr2 = new XMLHttpRequest();
requests.push(xhr2);
xhr2.open("GET", baseUri + "SigImage/0", true );
xhr2.responseType = "blob"
xhr2.onload = function (){
var img = new Image();
img.src = 'image.jpg';
img.onload = function (){
Ctx.drawImage(img, 0, 0);
revokeBlobURL( img.src );
img = null;
}
}
xhr2.send(null);
}
After that, I noticed that the two canvas was being updated and the image is loaded to the 2 canvas. Why is it? I have to load the image, only to the last canvas I supplied with the function OnSign. Where am I missing?
var Context; is declared in global scope
OnSign('canvas1');
OnSign('canvas2');
Doing so you are assigning value of canvas number two.
Update: http://jsfiddle.net/bmynvtLd/2/
This is what you desired to update both contexts? if yes this is how you pass the parameter to setInterval function: setInterval(function() {SigWebRefresh(ctx)}, 300);
running example:
var images = ['http://img09.deviantart.net/6d02/i/2015/284/0/b/beginning_autumn_by_weissglut-d9cssxw.jpg', 'http://orig06.deviantart.net/063c/f/2013/105/3/6/free_crystal_icons_by_aha_soft_icons-d61tfi1.png', 'http://img15.deviantart.net/b126/i/2015/118/c/1/this_small_tree_by_weissglut-d8re8q7.jpg', 'http://img00.deviantart.net/84f8/i/2015/284/d/f/nuclear_light_by_noro8-d9cs4u6.jpg'];
function OnSign(canvas){
var ctx = document.getElementById(canvas).getContext('2d');
tmr = setInterval(function() {SigWebRefresh(ctx)}, 300);
}
OnSign('canvas1');
OnSign('canvas2');
var index = 0;
function MyIndex()
{
// console.log(index);
index = images.length == index ? 0 : index+1;
return images[index];
}
function SigWebRefresh(Context){
var img = new Image();
img.src = MyIndex();
img.onload = function (){
Context.drawImage(img, 0, 0);
img = null;
}
}
Currently having some issues with drawImage();. Namely it wont actually draw. I tried it out with fillRect(); and it worked aswell as putting the drawImage(); inside the the onload function aswell (which worked).
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 400;
document.body.appendChild(canvas);
var tileArray = [
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,1,1,1,1,0,0,1,0,0,0],
[0,0,0,1,1,1,1,0,1,1,1,0,0],
[0,0,0,1,1,1,0,0,0,0,1,1,0],
[0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0]
];
var grassReady = false;
var grass = new Image();
grass.onload = function() {
grassReady = true;
};
grass.src = "images/grass.png";
var sandReady = false;
var sand = new Image();
sand.onload = function() {
sandReady = true;
};
sand.src = "images/sand.png";
var posX = 0;
var posY = 0;
if(grassReady) {
ctx.drawImage(grass, posX, posY);
}
Any pointers as to why this is would be greatly appreciated and I appologize in advance if messed up the code section in anyway. I went through other similar posts and coulden't find a solution that seemed to work.
As #Suman Bogati correctly says, you must wait for your images to load before using them in drawImage.
A Demo: http://jsfiddle.net/m1erickson/jGPGj/
Here's an image loader that preloads all images and then calls the start() function where you can use drawImage because all the images are fully loaded.
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("images/grass.png");
imageURLs.push("images/sand.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
// grass.png is in imgs[0]
// sand.png is in imgs[1]
}
This statement ctx.drawImage(); should be inside the grass.onload = function() {} function, something like
grass.onload = function() {
ctx.drawImage(grass, posX, posY);
}
If you define drawImage() outside the grass.onload() function, then that statment would executed first, so at that point grassReady is false, So the condition is not satisfied.
Bascially it's related to asynchronous concept.
Your code is running into order
1) First
var grassReady = false;
if(grassReady) {
//grassReady is false, this condition is not satisfied
ctx.drawImage(grass, posX, posY);
}
2) Second
grass.onload = function() {
grassReady = true;
};