When setting a HTMLImageElement's src property to a URL typically you need to listen to the 'load' event before getting width or passing to CanvasRenderingContext2D.drawImage() ect.
var image = new Image();
image.src = URL;
image.addEventListener('load', event => {
// image ready
});
But seemingly you don't need to listen to the 'load' event when setting a HTMLImageElement's src property to a dataURL(base64).
var image = new Image();
image.src = base64;
// image ready
Is setting a HTMLImageElement's src property to a base64 value synchronous or just really fast? Is this safe?
Related
Got a image inside of a HTML document. Source is a base64 string. I want to retrieve the color of the pixel that is clicked on. Using a memory canvas all I get is zeros.
function getColor(imagecontainer,top,left){
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
console.log(myData, left, top);
};
image.src = imagecontainer.find("img").attr("src");
}
There are many other questions regarding the same problem, however none of the solutions could solve this problem for me. MyData always contains zeros.
Update based on new information:
The cause could simply be that the main image (imagecontainer.find("img")) isn't loaded at the time it is references.
If this image exists in DOM you can use windows.onload to run your script:
window.onload = function() {
// code that uses the image
};
as this will run only when everything has loaded incl. image data. Optionally add an inline onload handler to the image tag (not recommended), or add the src via JavaScript and monitor the onload event there.
Another possible cause is that if this is IE and the image is in the cache, onload may not trigger. You can check the image's complete property to check for this:
var image = new Image();
image.onload = onloadHandler;
image.src = imagecontainer.find("img").attr("src");
if (image.complete) onloadHandler();
function onloadHandler() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
};
Although you can use this directly with the original image without loading another with the same url.
does anyone know if it's possible to synchronously create an image object from a data uri using JavaScript? It is possible to create an image object from a data URI asynchronously like this:
imageObj = new Image();
imageObj.onload = function() {
callback(imageObj);
};
imageObj.src = dataURI;
You might think that this would work:
imageObj = new Image();
imageObj.src = dataURI;
callback(imageObj);
But if I remember correctly, this fails in some browsers.
Ideas?
I think you can use complete attribute of Image object.
http://www.w3schools.com/jsref/prop_img_complete.asp
Before calling callback function, in a loop, you can continuously check whether complete is true. Once its true, then it is loaded.
I want to get width of an external image with javascript.
I try this code :
var image = new Image();
image.src = "1.jpg";
alert(image.width);
but it get image width in firefox and get 0 in chrome.
why it not work in chromica?
Try
image.onload = function() {alert(this.width);}
You're trying to get the width before the image has been downloaded. You have to wait, e.g.:
var image = new Image();
image.onload = function() {
alert(image.width);
};
image.src = "1.jpg";
Note that it's important to hook onload before you set src, because otherwise you have a race condition. Even though JavaScript is single-threaded on browsers (unless you use web workers), the browser is not. It can fire the load event as soon as you set src and, seeing no handlers, not queue them for callback.
Fact : The following code is valid.
var img = new Image();
img.onload = function() {
context.drawImage(img, 32, 32);
};
img.src = "example.png";
First Observation : The following will not draw to canvas.
var img = new Image();
img.src = "example.png";
context.drawImage(img, 32, 32);
Second Observation : The following will draw to canvas (eventually)...
var img = new Image();
img.src = "example.png";
setInterval(function() {context.drawImage(img, 32, 32);}, 1000);
Why is it that I need to call the drawImage function on a callback? And if that is the case, why does it eventually work when nested in a setInterval function?
When you set the src of the image object, the browser starts to download it. But you may or may not get that image loaded by the time the browser executes the next line of code. That's why you are drawing a "blank" image, because it ain't loaded just yet.
You need to place an onload handler to know when the image has finished loading. Only then will you draw it to the canvas:
var img = new Image(); //create image object
img.onload = function(){ //create our handler
context.drawImage(img, 32, 32); //when image finishes loading, draw it
}
img.src = "example.png"; //load 'em up!
You can only draw the image to canvas after it's loaded, that's why it works when you do it from the onload callback. And it works with setInterval because, after a certain amount of time, it eventually gets fully loaded.
I believe its because loading an image is not instant, it takes time. Once the image is loaded, then it can be drawn to the canvas
This is needed because the browser needs to "read" and eventually download the image (onload event) to correctly handle the image load. Using a setInterval to simulate this behaviour could not work, for example loading of a large image on a slow connection...
So the best way to do this is:
var img = new Image():
img.src = "image.jpeg";
img.onload = function() {
// Now you can play with your image.
}
If I use new Image() to load up an image in JavaScript, will it use a cached version if possible, or will it always load up a fresh copy?
var imgObj = new Image();
imgObj.src = 'http://...';
imgObj.onload = function (loadedImg) { }
One thing to note is that if you want onload to always happen (even when it's in cache) you should define onload before src.
var imgObj = new Image();
imgObj.onload = function (loadedImg) { }
imgObj.src = 'http://...';
It'll load from cache if it's there, the same way a <img> in your markup would.
You can force a reload by adding a bogus query string argument. If your statement assigning a URL to the src property of the image is
imgObj.src = 'http://www.mySite.com/images/anImage.png';
you could render it as
imgObj.src = 'http://www.mySite.com/images/anImage.png?foo=0';
Just understand that on subsequent loads it will still use the cached copy unless you change the query string argument.