I have a web application that generates images on the fly and then renders (segments of) them on the client using canvas - the general code looks something like this (simplified)...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){ // Set onload before setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
img.src = ...
In firefox and chrome, this works fine. In IE9 (and sometimes IE10), this sometimes results in a blank image. As a workaround, I put in...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
window.setTimeout(function(){
context.drawImage(img,0,0,width,height,0,0,width,height);
}, 10); // 10 millisecond delay here seems to give IE time to make sure the image is actually ready
}
img.src = ...
Obviously, putting in random delays is making me nervous - I would much rather figure out why this happens. Is there another event type / method / property on images that may be used? Could there perhaps be something in the http headers sent down with the images / the encoding / transfer method that is causing this?
Since drawing images on the canvas seems to be something that trips up new users a lot, searches mostly yield instances where the developer set the source before the onload method. The closest other question / reply I was able to find was this : https://stackoverflow.com/a/15186350/470062
Edit:
I have updated the examples to include width and height definitions at the start
Edit 29/Apr/2013:
The 10 millisecond delay is not always sufficient - I have changed the code to check the canvas pixels to determine if anything has been drawn - This feels like such an ugly hack though - I would love to know if there is a better way :
... snip - this is at the end of the image load callback..
if((navigator.appVersion.indexOf("MSIE")) >= 0){
function checkAndRedraw(){
context.clearRect(0,0,width,height);
context.drawImage(img, 0, 0, width, height);
var imageData = context.getImageData(0, 0, width, height),
data = imageData.data,
len = data.length;
for (var i = 0; i < len; i += 4){
if(data[i] || data[i+1] || data[i+2]){
scheduleRedraw = null; // prevent memory leak
return; // A pixel contained some non empty value so something was drawn - done.
}
}
scheduleRedraw();
}
var redrawHackTimeout;
function scheduleRedraw(){
window.clearTimeout(redrawHackTimeout);
redrawHackTimeout = window.setTimeout(checkAndRedraw, 500);
}
scheduleRedraw();
}
//END IE9 Hack
I have the same issue in IE9, what I had to do is this too:
theImage = new Image();
theImage.onload = function() {
that = this;
setTimeout(function() {
that.onload2();
}, 100);
};
theImage.onload2 = function(){
#your old load function code
}
theImage.src = 'http://....';
I don't understand why ie9 triggers load image function when it's not actually loaded or not "usable" yet in a canvas. it makes me pull my hair out.
var img = new Image();
img.src = ...
img.onload = function(){ // Set onload before after setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
You must set the src, then wait for the image to load.
Related
I have an image encoded in base64 and I need to draw it on a canvas in a synchronous fashion. Take a look at this code I had:
//convert base64 to actual Image()
var input = new Image();
input.src = dataurl;
//draw on canvas
var w = input.width, h = input.height;
canvas.width = w; canvas.height = h;
ctx.drawImage(input, 0, 0)
This used to work on Chrome. I know it is not a good practice to assuming the browser will be able to finish loading before the next instruction, but it worked. After several updates later, it finally fails.
I cannot listen to the load event because that would make it async, which is not good because that's a generator function and I need to return the canvas synchronously. The program is built around it and making it async would mean complete rewrite. That's not good.
Attempt
input.src = dataurl;
while(!input.width){ /* busy wait */ }
var w = input.width, h = input.height;
Does not work since the browser won't update it before my code finishes executing.
Right now I really can't think of any way to solve this dilemma, so any input is appreciated. (Do note that the datauri is generated from another canvas, which I do have access to.)
It's not possible to draw an image to a canvas before it is loaded, which means waiting to a load event. This means you cannot load a data URI into an DOM image synchronously, so you will need to convert your API to an asynchronous one.
The only other way would be to have a JavaScript-based image decoder that converts the data URI into a ImageData object, which would not be trivial to do and require users to load a lot more code.
There used to be a different hack involving innerHTML that would work, but it too no longer works.
Now-Broken Example:
var base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAACeCAYAAADDhbN7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkE1MTZBNzk1MDE1MTFFNUEzODE5OTE2QTE2M0ExOTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkE1MTZBNzg1MDE1MTFFNUEzODE5OTE2QTE2M0ExOTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDM0YzRTJFODk1NDcxMUU0OUQ3NkI2RkYyOUFBMjg3RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDM0YzRTJFOTk1NDcxMUU0OUQ3NkI2RkYyOUFBMjg3RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgtvbosAAAnjSURBVHja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';
var el = document.createElement('p');
el.innerHTML = '<img src="'+base64+'" />';
var input = el.firstChild;
//draw on canvas
var canvas = document.getElementById('canvas');
var w = input.width, h = input.height;
canvas.width = w; canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(input, 0, 0);
<canvas id="canvas"></canvas>
Just use Promise to make it async.
return new Promise(resolve => {
image.onload = function () {
ctx.drawImage(input, 0, 0)
resolve('resolved');
}
});
How i can draw a lot of image in canvas?
I have a lot of images url array and need output it. How to do with good perfomance.
me example code (jsfiddle: http://jsfiddle.net/6sunguw4/):
$(document).ready(function () {
var bgCanvas = document.getElementById("bgCanvas");
var bgCtx = bgCanvas.getContext("2d");
bgCanvas.width = window.innerWidth;
bgCanvas.height = window.innerHeight + 200;
var array = new Array();
array[1] = 'https://developer.chrome.com/webstore/images/calendar.png';
array[2] = 'http://www.w3schools.com/html/html5.gif';
array[3] = 'http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg';
img0 = new Image();
img0.onload = function() {
bgCtx.drawImage(img0, 0,0, 100, 100);
}
img0.src = array[1];
img2 = new Image();
img2.onload = function() {
bgCtx.drawImage(img2, 100,0, 100, 100);
}
img2.src = array[2];
img3 = new Image();
img3.onload = function() {
bgCtx.drawImage(img3, 200,0,100,100);
}
img3.src = array[3];
});
Here's code to load all images from the URLs you put into your array without having to hand code 2000 times new Image/.onload/.drawImage (I call the array imageURLs in the example code below):
// image loader
// put the paths to your images in imageURLs[]
var imageURLs=[];
// push all your image urls!
imageURLs.push('https://developer.chrome.com/webstore/images/calendar.png');
imageURLs.push('http://www.w3schools.com/html/html5.gif');
imageURLs.push('http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg');
// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
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 now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
bgCtx.drawImage(imgs[0], 000,0, 100, 100);
bgCtx.drawImage(imgs[1], 100,0, 100, 100);
bgCtx.drawImage(imgs[2], 200,0, 100, 100);
}
For better loading performance:
Browsers typically download only 6-8 files at a time from one domain. So your 2000 images would require 2000/8 == 250 separate sequential calls to your domain to load.
You can combine your 2000 into one or more spritesheets (preferably 6 or less spritesheets). That way the browser can download the 1-6 spritesheets containing your 2000 images in one trip.
You can use the extended version of context.drawImage to pull any desired image from the spritesheet. For example, assume an image you need is located at [200,200] on your spritesheet and is 100x100 in size. You can draw that image on your canvas like this:
bgCtx.drawImage(spritesheet,
200,200,100,100 // clip the image from the spritesheet at [200,200] with size 100x100
125,250,100,100 // draw the clipped image on the canvas at [125,250]
);
There's not much you can do with the code itself. drawImage seems pretty optimized, and it's the raw amount of images what could slow things down.
One thing you can maybe do, depending on your goal, is to prepare composite images. For example, those 3 images could be easily converted into a single PNG image, and then it would require only one drawImage call. However, if you plan to shift their places or some effects, I'm afraid you're stuck with what you have.
Hey I want to draw multiple images, one a canvas background, two a player that can move on top of that canvas. Here is my question: When I put the var canvas and canvas properties globally it doesn't work. But when I put it back in the img.onload function it works!!! Why is this and what options do I have?
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
var img = new Image();
img.src = "Images/Grass Texture.png";
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
var player2 = new Image();
player2.src = "Images/Players/De Gea.png";
var football = new Image();
football.src = "Images/Football/Football.png";
img.onload = function()
{
/* The rest of the code draws onto the graphics context */
g.drawImage(img, 0, 0);
g.drawImage(img,1200, 1200, 1200, 1200);
};
It's important to understand that image loading is asynchronous. That means while your image is loading the code will continue despite.
If the browser is not able to load and decode the images in time there won't be any images to draw.
Even when you use the onload handler (which is necessary) you need to think about the asynchronous nature in the rest of the code - perhaps the code continues to other parts which will fail due to dependency on the images.
You can collect image loading like this:
...
/// if you have many images an array could be considered
var img = new Image();
var player1 = new Image();
var player2 = new Image();
var football = new Image();
/// number of images to load
var count = 4;
/// now share a load handler
img.onload = loadHandler;
player1.onload = loadHandler;
player2.onload = loadHandler;
football.onload = loadHandler;
/// set sources to start loading
img.src = "Images/Grass Texture.png";
player1.src = "Images/Players/Mignolet.png";
player2.src = "Images/Players/De Gea.png";
football.src = "Images/Football/Football.png";
function loadHandler() {
/// decrement the counter
count--;
/// when 0 all images has loaded
if (count === 0) startGame();
}
When all images has loaded the script will continue to startGame() which is also where you need to continue your game from:
function startGame() {
...
g.drawImage(img, 0, 0);
g.drawImage(img,1200, 1200, 1200, 1200);
/// Important! continue your code from here
nextStep();
}
So after invoking image loading by setting the sources your script does not call any other steps until startGame() is called.
Now, the loading can fail for various reasons. If you don't handle errors your game might just stop and you won't know why. During development you should of course always check the console for errors (see console, network etc. if any errors occur) but for a user this won't help much.
You should always add an error handler mechanism to the images as well. You can do this by using the onerror and onabort handlers - after setting the onload handler:
var hasErrors = false;
img.onerror = errorHandler;
player1.onerror = errorHandler;
player2.onerror = errorHandler;
football.onerror = errorHandler;
img.onabort = errorHandler; /// or use a separate abort handler
player1.onabort = errorHandler;
player2.onabort = errorHandler;
football.onabort = errorHandler;
In the error handler you can notify the user, or use a fallback, or anything that can possible solve the situation:
function errorHandler(err) {
/// set error flag
hasErrors = true;
/// notify user, post an error message etc. something..
console.log('Could not load image:', this.src, err);
/// call loadHandler() from here to decrement counter and
/// handle situation when all images has reported in for duty (or not)
loadHandler();
}
And then modify the loadHandler to be error aware (just an alert here, but replace with something more useful):
function loadHandler() {
/// decrement the counter
count--;
/// when 0 all images has loaded
if (count === 0) {
if (hasErrors) {
alert('Sorry mate! Error during image loading');
return;
}
startGame();
}
}
That being said, you can also do this by using an image loader that can handle all the setup and events (loading, errors, progress etc.) for you. These are made, incl. my own if I may, YAIL loader (and there are others), for the purpose of saving developers from a lot of problems and headache - and they are free. Something to consider..
Hope this helps!
As some of you might know it's not possible to use HTML5 video as an image source for canvas elements on mobile devices (the video will be opened in an external player instead of the browser). I need a feature test for that.
As I cannot simply check for canvas and video support (as most mobile devices will support both, but not the interaction) I was thinking of doing something like this:
var feature = true;
try {
var v = document.createElement('video');
var c = document.createElement('canvas');
c.getContext('2d').drawImage(v, 0, 0, 100, 100);
} catch (e){
feature = false;
}
alert(feature);
Yet, it will return true on the iPad, Android will output false. I probably assume this is not an iOS Safari bug but a flaw in my feature test, but I simply have no clue of how to approach this.
UPDATE:
So what I ended up with at the moment is the following:
var v = document.createElement('video');
var feature = false;
if (v.canPlayType('video/mp4') == 'probably'){
v.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAAAAAAIAAAABAAAABAAAAAEAAAACAAAAAQAAAAEAAAAYc3RjbwAAAAAAAAACAAADYgAABaQAAAAUc3RzcwAAAAAAAAABAAAAAQAAABFzZHRwAAAAAAREREREAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAwLjkuOCAyMDEyMDcxODAwAAACUm1kYXQAAAHkBgX/4NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxMjAgLSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDExIC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9uczogY2FiYWM9MCByZWY9MSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjAgbWU9ZXNhIHN1Ym1lPTkgcHN5PTAgbWl4ZWRfcmVmPTAgbWVfcmFuZ2U9NCBjaHJvbWFfbWU9MSB0cmVsbGlzPTAgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0wIGNocm9tYV9xcF9vZmZzZXQ9MCB0aHJlYWRzPTYgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTUwIGtleWludF9taW49NSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9Y3FwIG1idHJlZT0wIHFwPTAAgAAAAD5liISscR8A+E4ACAACFoAAITAAAgsAAPgYCoKgoC+L4vi+KAvi+L4YfAEAACMzgABF9AAEUGUgABDJiXnf4AAAAARBmiKUAAAABEGaQpQAAAAEQZpilAAAAARBmoKU';
} else {
v.src = 'data:video/ogg;base64,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';
}
var c = document.createElement('canvas');
c.width = c.height = 50;
var ctx = c.getContext('2d');
v.play();
var async = setTimeout(function(){
ctx.drawImage(v,0,0);
var data = ctx.getImageData(0, 0, 50, 50).data;
feature = (Math.max.apply(Math, data) > 0);
v.pause();
}, 50);
At least it finally produces the correct output on iOS, yet there are two more problems:
it is async
firefox will (sometimes) fail, complaining about SecurityError: The operation is insecure. at var data = ctx.getImageData(0, 0, 50, 50).data what does not really make sense to me.
Any ideas on that?
You could try using a video which has a certain pixel at a certain area, say a black pixel at the top left corner. Then feed the video into the canvas and load just one frame. Then check if you can retrieve that pixel on the canvas using getImageData.
I am trying to load an image, get the pixel values out of it and store them in an array for later use. The reason for this is that I'm coding a raycaster("fake 3d" engine), where I want to draw walls as columns on the screen with pixel values taken from a texture-image loaded before-hand.
This is the code im using now:
var imgwidth;
var imgheight;
var wallSprite1 = new Image();
wallSprite1.src = "textures/bricks_tile.gif"
if(wallSprite1.complete) findHHandWW();
else wallSprite1.onload = findHHandWW;
function findHHandWW() {
imgwidth = this.width;
imgheight = this.height;
getImageData(this);
return true;
}
function getImageData(img) {
var tempcanvas = document.createElement('canvas');
tempcanvas.height = imgwidth;
tempcanvas.width = imgheight;
var tempcontext = tempcanvas.getContext("2d");
tempcontext.drawImage(img,0,0);
wallData = tempcontext.getImageData(0, 0, imgwidth, imgheight);
}
However, this gives me the following error:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
I read about it, and didn't find any real answer to my problem. I want run this locally, for now. Is it even possible? I tried using;
image.crossOrigin = '';
but it didnt work.
Have I gone about this in the wrong way? I wonder if there's an easier way to accomplish what I want.