What's the use of declaring a variable as an image object in javascript
var img = new Image();
What's the use of the Image() object
In one word: The Image() constructor provide you a way to manipulate an image in pragmatically way. Suppose you need take some image modification based a radio button is checked or not then how can you do it? Also may need take few action based image URL value, loaded or not etc in these cases Image() constructor is very handy. It will help you access their attributes as a object property as well. See below:
var image = new Image(100, 200);
image.src = 'profile-picture.jpg';
document.body.appendChild(image);
Above code is equivalent to: <img width="100" height="200" src="profile-picture.jpg">
Image() constructor also provide few handy methods to take the action based image status, see below:
image.onload = function(){
// You can take action here when image loaded
}
image.onerror = function(){
// You can take action here when image load failed
}
You can also take detail lesson from here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
I have used this mostly to preload the images, this is what we need to preload an image.
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Related
I'm working on a project in game development in Javascript and HTML5 canvas. I have this common code I use for loading sprites:
var sprite = new Image();
sprite.src = "sprite.png";
I was wondering if there was a simpler way to do this, which I first thought by function, but not sure how I should do so. I would think to do so like this:
function loadSprite(src) {
this.src = src;
}
var loadSprite(sprite.png);
However I don't think this is the right way to do it. Could someone correct my code and/or give a simpler way of loading an image like this? (I am also using a ctx.drawImage(..., sprite) in order to change coordinates on the canvas so it needs an x,y,width,and height parameters in one way or another)
Why not use as below:
function loadSprite(src) {
var sprite = new Image();
sprite.src = src;
return sprite
}
var _local_var = loadSprite('sprite.png');
I want to track changes that are made to the src property of an HTMLImageElement while it is not yet attached to the document. My goal is to modify the image URL to force the usage of a certain proxy server using an inserted script. The scripts that use the Image object mainly for preloading are external (3rd party) ones, so I cannot just search & replace any occurence of instance.src = value to anything else. I can control the document the scripts are embedded in, but cannot control the scripts themselves.
I already tried to define getter/setter on the Image element
Object.defineProperty(
Image.prototype,
"src",
{ get : function(){...}, set : function(val){...}}
);
But this does not seem to have any effect at all. When creating a new Image just like
var img = new Image();
img.src = "foo.png";
alert(img.src);
neither the setter nor the getter is called.
Do you have any idea what else I might try to get notified when the src property is modified without modifying the original source where the property is set?
Thanks in advance!
I retested my previous answer with your example code - no dice. So, I'll go with Andrei's suggestion instead - don't do this :P Instead, work with methods attached to the prototype through more "conventional" means:
Image.prototype.setSrc = function(src) {
// your code affecting this.src
// from what I can tell in your use-case, you only need this setter
};
Image.prototype.getImage = function() {
// but, in case you want to do anything before getting the image
// you can call this method
};
var img = new Image();
img.setSrc("foo.png");
// snip
document.body.appendChild(img.getImage());
The alert works, but the return is 0. How do I get it to return the correct value?
var img;
img = new Image();
img.onload = function() {
alert(img.width);
return(img.width);
};
img.src = "https://maps.gstatic.com/mapfiles/dir/bike.png";
alert(img.width);
You can't do that. onload runs once the image is loaded, which means after setting the src, onload will run later.
You need to put all code dealing with the image's width inside the onload.
You can return the value, but you have no way of capturing it.
The function you pass to onload is executed, when your image has loaded. But there is no way to retrieve the return value there. You can just call another function inside, to process the value.
I get 10 from this code in Chrome:
var img = new Image();
img.onload = function() { console.log(img.width); }
img.src = "https://maps.gstatic.com/mapfiles/dir/bike.png";
You do have to wait for the image to load before querying width (in onload).
this may be an odd one to explain:
I want to create dynamically a collection of canvas that will have a single image in it. And this displays (after much hassle and getting rid of the onload event) but when I try to refresh the page I sometimees get nothing on the screen.
And when I was using thee onload event (to wait until the image is loaded) it would not display or display everything in the last canvas.
Here is a snippet of the code:
var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
img = new Image()
img.src = sources[i]
canvas = document.createElement('canvas')
$(canvas).attr('id', i)
canvas.height=300
canvas.width=200
var context = canvas.getContext('2d');
//onload commented out allows expected display
//img.onload = function() {
context.drawImage(img, 0, 0);
//}
divCanvas.appendChild(canvas)
}
I have seen many posts that seemed to look like mine and tried quite a few but to no avail.
I think the issue is that var context is overwritten before the img.onload event is triggered. The img.onload event only has a reference to global scope. This is why only the last image shows up. You need to find the correct context inside the event.
I can't test your code directly, but I think it should be something like this:
var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
img = new Image();
img.src = sources[i];
img.id = i; //Allow img to remember its corresponding canvas/context
canvas = document.createElement('canvas');
$(canvas).attr('id', i);
canvas.height=300;
canvas.width=200;
var context = canvas.getContext('2d');
divCanvas.appendChild(canvas);
img.onload = function() {
//Use the image id to get the correct context
var canvas = document.getElementById(this.id);
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
}
}
For consistent behavior, you must use onload. If you don't the canvas drawing code may execute before the image is loaded and the desired image will not be drawn.
It might be that the onloads that would draw to the other canvases are not being called because the Images are getting garbage collected before the event can fire.
Try adding
var images = [];
At the start of your code and
images.push(img);
After the img = new Image() line.
If that doesn't work, try adding those images to the DOM tree-- img.setAttribute('style', 'display: none') first so you don't see them and they don't interfere with the document structure.
I found the fix here:
https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Drawing_images
Apparently they have dropped img.onload to have the function called when the body has finished loaded.
Though, I still do not understand why my script or, ellisbben solution was not working.
If anyone as an answer for it, it would be very welcomed...
function loader(img) {
var imgH = img.height;
var imgW = img.width;
console.log(imgH, imgW);
};
img = new Image();
img.src ='../images/pic1.jpeg';
img.onLoad = loader(img);
So, It is exepeted, that I'll get image's size, but I got "0 0" in console. And size of image is 500X700. What's wrong with this code?
This makes no sense:
img.onLoad = loader(img);
you want to pass the actual function to the event:
img.onload = loader;
and use this instead of img within the function.
Also you need to assign the event before changing the image's src property.
Also note that there are numerous problems with the load event on images. From the jQuery manual on load():
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Try this:
function loader(){
var imgH = this.height;
var imgW = this.width;
console.log(imgH, imgW);
}
var img = new Image();
img.onload = loader;
img.src ='../images/pic1.jpeg';
I used this way:
img.onload = function(){//here wrote everything from loader};
And it was the only working solution I have found.
I found the best way is to let the computer do the scaling first.
and declaring the onload = "some_function()" in the body.
<body onload="some_function()">
and then getting the sizing afterward in the script.
some_function(){
var image1 = document.getElementsByClassName('main')[0];
var computedStyle_image1 = window.getComputedStyle(image1);
var image_width = computedStyle_image1.getPropertyValue('width');
}
I noticed with google chrome you need to make sure you call the onload="function" within the body div otherwise the image values arn't set and it pulls in 0px for width and height.