Javascript new image
In JavaScript, you can create a new image object using the new
keyword and the Image
constructor. Here is an example:
var img = new Image();
This creates a new Image
object, but it doesn't load an image file. To load an image file, you need to set the src
property of the Image
object to the URL of the image file.
Here is an example:
var img = new Image();
img.src = 'image.jpg';
This loads the image file image.jpg
and sets it as the source of the Image
object.
You can also set the src
property to a data URL, which is a string that represents the image data. Here is an example:
var img = new Image();
img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QBYRXhpZgA8fAAK/...';
This loads the image data from the data URL and sets it as the source of the Image
object.
You can also use the createImageBitmap()
method to create a new ImageBitmap
object from an image file or a data URL. Here is an example:
var img = new ImageBitmap();
img.src = 'image.jpg';
This creates a new ImageBitmap
object and loads the image file image.jpg
into it.
You can also use the URL.createObjectURL()
method to create a URL that points to the image file, and then use that URL to set the src
property of the Image
object. Here is an example:
var img = new Image();
var url = URL.createObjectURL('image.jpg');
img.src = url;
This creates a new URL that points to the image file image.jpg
and sets it as the source of the Image
object.
It's worth noting that the Image
object is not a DOM element, it's a JavaScript object that represents an image. You can't use it directly in the HTML document, you need to use it in a JavaScript context, for example to load an image in a canvas element or to display it in a web page.
Also, you can use the fetch
API to load an image file, here is an example:
fetch('image.jpg')
.then(response => response.blob())
.then(blob => {
var img = new Image();
img.src = URL.createObjectURL(blob);
});
This loads the image file image.jpg
using the fetch
API, and then sets the src
property of the Image
object to the URL of the image data.