I'm new to JavaScript and I made this code. The purpose of this code is to use JavaScript and HTML to display an ARRAY of images in a website. They all need to be displayed at once. This is the code so far, however it is not working.
<html>
<head>
<script>
var ArrayOfImages = [];
var Image1 = new Image1()
image1.src = "image1.jpg";
var Image2 = new Image2()
Image2.src = "image2.jpg";
var Image2 = new Image3()
Image3.src = "image3.jpg";
ArrayOfImages.push(Image1);
ArrayOfImages.push(Image2);
ArrayOfImages.push(Image3);
ArrayOfImages.toString();
document.write(ArrayOfImages);
</script>
</head>
<body>
</body>
</html>
When I run this code all I get is an empty webpage.
For anyone wondering, the images are in the same file as the html file. I'm also relatively new to JavaScript and HTML so please be clear in how to fix it.
You have to use array.forEach then append each array item in body.Like this
var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) { // for each link l in ArrayOfImages
var img = document.createElement('img'); // create an img element
img.src = image; // set its src to the link l
document.body.appendChild(img); // append it to the body
});
See Fiddle: Fiddle
UPDATE
You can also set height and width as your requirement.Like below.
var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array
ArrayOfImages.forEach(function(image) {
var img = document.createElement('img');
img.src = image;
img.height = "45";
img.width = "50";
document.body.appendChild(img);
});
Related
Bhtm
<body>
enter your url<input type="url" id="image">
<button type="button" onclick="display()">click</button>
<script>
function display()
{
var myimage = document.createElement("img");
myimage.src = document.getElementById("image").value + "#" + new Date().getTime();
myimage.style.width = "100px";
myimage.style.height = "120px";
document.body.appendChild(myimage);
}
</script>
</body>
</html>
Seen as the only thing that changes each time is the URL, you could just use a global var to store a reference to the image element, and then just change it's url.
eg.
<script>
var myimage;
function display()
{
//only create image 1 time..
if (!myimage) {
myimage = document.createElement("img");
myimage.style.width = "100px";
myimage.style.height = "120px";
document.body.appendChild(myimage);
}
myimage.src = document.getElementById("image").value + "#" + new Date().getTime();
}
</script>
I am trying to add an image to the html page with just javascript and I have to do it without using innerHTML. I can't seem to get the images to appear at all.
javascript
var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"];
function newImage(){
var ele0 = document.createElement("img");
var image = document.getElementById("image");
ele0.scr = galleryPhotos[0];
image.appendChild(ele0);
var ele1 = document.createElement("img");
var image = document.getElementById("image");
ele1.scr = galleryPhotos[1];
image.appendChild(ele1);
var ele2 = document.createElement("img");
var image = document.getElementById("image");
ele2.scr = galleryPhotos[2];
image.appendChild(ele2);
var ele3 = document.createElement("img");
var image = document.getElementById("image");
ele3.scr = galleryPhotos[3];
image.appendChild(ele3);
var ele4 = document.createElement("img");
var image = document.getElementById("image");
ele4.scr = galleryPhotos[4];
image.appendChild(ele4);
}
What I am trying to put it into in html
<div id="image"></div>
Using chromes debugging tool doesn't help me at all.
You have a typo: scr should be src.
Try this:
var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"];
function newImage(){
var image = document.getElementById("image");
var i = 0;
while(galleryPhotos[i]){
el = document.createElement("img");
el.src = galleryPhotos[i];
image.appendChild(el);
i++;
}
}
<img id="opeth"> </img>
<script type="text/javascript">
var gearpics = [];
document.getElementById("opeth").innerHTML = gearpics;
var prs = new Image();
prs.onload = function() {
};
prs.src = src
var prs2 = new Image();
prs2.onload= function() {
};
prs2.src = src
var prs3 = new Image();
prs3.onload= function() {
};
prs3.src = src
function insert() {
gearpics.push(document.getElementById('opeth').src = prs.src);
gearpics.push(document.getElementById('opeth').src = prs2.src);
gearpics.push(document.getElementById('opeth').src = prs3.src);
}
</script>
This is my code. When I run it, and press the "Show pictures" button, only the third picture (id=prs3) appears. I want all of them to show up.
You are using the same ID for your 3 pictures:
gearpics.push(document.getElementById('opeth').src = ...);
ID should be unique in HTML document.
So I have a webpage with one image on it (slicedImg_01). I would like to have that static picture animate randomly through a series of 6 pictures on mouseover. So far what I have will randomly generate pictures to the page, however it just creates a new image to the page and doesn't replace the original image. Here is what I have. Also, I am trying to avoid jquery. (slicedImg_02, slicedImg_03, etc.)
HTML:
<body>
<div >
<img onmouseover="imgSwitch()" src="slicedImg_01.gif" height="50" width="50" id = "pic">
</img>
</div>
</body>
JS:
function imgSwitch(){
var img = new Array("slicedImg_01.gif", "slicedImg_02.gif", "slicedImg_03.gif", "slicedImg_04.gif", "slicedImg_05.gif", "slicedImg_06.gif");
var i;
//var pic = ""
for (i = 0; i < 7; i++)
var rand = img[Math.floor(Math.random() * img.length)];
var image = document.getElementById("pic").src
image = new Image();
image.src = rand;
document.body.appendChild(image);
What I don't understand is the line creating a new image image = new Image();. The code below should replace the current image with the randomly selected new image:
function imgSwitch(){
var img = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg");
var rand = img[Math.floor(Math.random() * img.length)];
document.getElementById("pic").src = rand;
}
Note the image names need to be replaced with yours.
I'm trying to write a file upload script for use in a secure corporate intranet and having just a little trouble...
In the following code, I get no errors and all my debugging looks like everything is working, but the end result is always a 'blank' image:
var ctx = document.createElement('canvas');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = $('#UpdateImage:file');
var imgStr = ctx.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
When I "inspect element" on the 'Item_Create_Image_Avatar' object, the 'src' value looks absolutely perfect:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" id="Item_Create_Image_Avatar" style="vertical-align:top">
Why is my image coming in as blank?
Found This.
Select a File to Load:
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function loadImageFileAsURL(){
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0){
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var divTest = document.getElementById("imgTest");
var newImage = document.createElement('img');
newImage.src = srcData;
divTest.innerHTML = newImage.outerHTML;
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
EDIT:
Source: How to convert image into base64 string using javascript
If you want to get the Data URL of the image after it loaded, you should get the Data URL after it loaded
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
imgStr = canvas.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
}
img.src = $('#UpdateImage:file');
EDIT: Included the rest of the code
EDIT2: Edited stupid error regarding canvas and its context