We Keep Coding

Javascript image array issue

this is my problem: im trying to create an image selector, i mean a collection of images shown on the screen among which i can choose one and store it in a var. This is the code for the array:
<script typre="text/javascript">
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
img[1] = new Image();
img[1].src = "../images/poggiatesta1.JPG";
for (var i = 0; i < img.length; i++) {
document.write(img[i]);
};
</script>
When i run it, it displays [object HTMLImageElement] instead of the image! What should i do?? Thanks all!

Because img[i] is an object and document.write will write it as string representation of it by calling img[i].toString().
If you want to display an image then use
for (var i = 0; i < img.length; i++) {
document.body.appendChild(img[i]);
};

var img = new Image();
img.src = "../images/poggiatesta2.jpg";
document.write(img.outerHTML);
Use the outerHTML property in order to display it

It is obvious because for loop will print img[0],img[1] not src of image
You can write img[i].src
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
img[1] = new Image();
img[1].src = "../images/poggiatesta1.JPG";
for (var i = 0; i < img.length; i++) {
alert(img[i].src);
};

Cannot set property 'src' of null in JavaScript

I'm in the middle of changing some existing javascript code which exports images inside a HTML document to a word document. The new functionality is going to capture canvas data inside HTML, convert it to .png and then export however I'm getting 'Cannot set property 'src' of null' when the code reaches this part:
//Capture all canvas data
var canvasData = markup.find('canvas');
var tempImage = new Image();
////Array to hold of the images
var imageArray = Array();
for (var i = 0; i < canvasData.length; i++) {
tempImage.src = canvasData[i].toDataURL("image/png");
imageArray[i] = tempImage;
tempImage = null;
}
Any help would be greatly appreciated!

As you can see you are nullifying tempImage inside the loop, after the first iteration it will be assigned a null value, so in the next iteration you'll be trying to set the src for null. that is why you are getting this error. Take var tempImage = new Image(); inside the loop.
for (var i = 0; i < canvasData.length; i++) {
var tempImage = new Image();
tempImage.src = canvasData[i].toDataURL("image/png");
imageArray[i] = tempImage;
tempImage = null;
}

Move your var tempImage = new Image(); to inside the loop. Something like
for (var i = 0; i < canvasData.length; i++) {
var tempImage = new Image();
tempImage.src = canvasData[i].toDataURL("image/png");
imageArray[i] = tempImage;
// not really required
// tempImage = null;
}

Updating an array on button click Javascript

This question may be a bit long winded but bear with me.
I am trying to update and array every time a user hits the save button.
When they click save an image of a canvas on the page is created.
These DataURI values are kept in an array.
Once the value is saved a thumbnail of sorts is created and added at the bottom of the screen.
Clicking the X icon on those images calls a function to remove the correct image from the array.
The images should then be redrawn with the update array values, thus removing it from the
screen.
I have included images to try and demonstrate:
Image #1 (when save is clicked and image added below):
http://postimg.org/image/cybazwydf/
Image #2 (after closing the on screen images, adding a new image adds the deleted ones again along with the new one):
http://postimg.org/image/gi5pcornl/
That is the issue, that it re-adds the deleted values.
I will post the code for it below:
function getDataUrl () {
var a = document.getElementById("theCanvas");
var context = a.getContext("2d");
var dataURL = a.toDataURL();
save(dataURL);
}
var theImages = new Array();
//Add dataURL to array:
function save(URL) {
theImages.push(URL);
var x = JSON.stringify(theImages);
localStorage.setItem('images', x);
drawImages(x);
}
function drawImages(array){
var array = localStorage.getItem("images");
array = JSON.parse(array);
//If an image is saved, display the saveArea div:
if (array.length > 0){
document.getElementById("saveArea").style.visibility="visible";
}
//Clear the elements that might already be in the div so they don't appear twice:
var theDiv = document.getElementById("saveArea");
while (theDiv.firstChild) {
theDiv.removeChild(theDiv.firstChild);
}
for (var x=0; x < array.length; x++){
//Create image for each value in array:
var divimg = document.createElement("div");
divimg.style.marginRight="10px";
//divimg.style.border = "1px dotted red";
divimg.className = "saveContainer";
divimg.style.width = 300+"px";
divimg.style.padding = 5+"px";
divimg.style.marginRight="10px";
divimg.style.height = 150+"px";
divimg.style.display="inline-block";
divimg.style.marginRight="35px";
document.getElementById("saveArea").appendChild(divimg);
var img = document.createElement("img");
img.src = array[x];
img.width = 300;
img.height = 150;
img.setAttribute("id", "theImageId");
img.style.marginRight="10px";
img.className = "saveImg";
//Add each image to the containing div:
divimg.appendChild(img);
//Create close button:
var close = document.createElement("img");
close.src="close.png";
close.width = 50;
close.height = 50;
close.border = 0;
close.style.position="relative";
close.style.bottom=115+"px";
close.style.right=40+"px";
close.className="closeButton";
//close.style.cssFloat="right";
//close.style.right= 0+"px";
var link = document.createElement("a");
link.href = "#";
link.appendChild(close);
link.nameIndex = x;
//WHEN THE USER CLICKS THE CLOSE ICON:
link.onclick = (function (x) {
var imageNum = this.nameIndex;
alert("You clicked to close image "+(imageNum+1));
//Remove the image:
array.splice(x,1);
alert("The length of this array is: "+array.length);
//Update localStorage:
localStorage.removeItem('images');
array = JSON.stringify(array);
localStorage.setItem('images', array);
drawImages(array);
} );
//Add the close button the the containing div:
divimg.appendChild(link);
//divimg.appendChild(close);
} //End Loop
} //End drawImages();
I've been trying to solve this for hours but no luck..

After removing the image from the array you are not storing it anywhere so the splice result is lost and the array remains the same
array.splice(x,1);
needs to be
array = array.splice(x,1);

How to end .empty()

i have an array(allArr) of arrays on a function,first time array from position 0 from allArr is taken with image from position 0 from another array with images (named image) 'cause of document.ready then by clicking on a button (id="nextimageandshuffle") arrays from allArr and images from image array reach fifth.My problem is that everytime i click on next button i must clear with empty() the div(id="array") where arrays from allArr are added with append() but i cant stop it after 5th array so the 5th image (from image array) remains there but 5th array (from allArr) its deleted...
Heres my code :
var allArr;
var contor = 0;
var i = 0;
$(document).ready( function() {
var arr = new Array("images/alfabet/w.png", "images/alfabet/f.png", "images/alfabet/v.png", "images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/p.png", "images/alfabet/o.png", "images/alfabet/r.png");
var baiat = new Array("images/alfabet/p.png", "images/alfabet/b.png", "images/alfabet/a.png", "images/alfabet/aa.png", "images/alfabet/i.png","images/alfabet/a.png", "images/alfabet/t.png");
var colac = new Array("images/alfabet/g.png", "images/alfabet/c.png", "images/alfabet/u.png", "images/alfabet/o.png", "images/alfabet/l.png", "images/alfabet/a.png", "images/alfabet/c.png");
var slapi = new Array("images/alfabet/s.png", "images/alfabet/ss.png", "images/alfabet/l.png", "images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/p.png", "images/alfabet/i.png", "images/alfabet/i.png");
var umbrela = new Array("images/alfabet/u.png", "images/alfabet/n.png", "images/alfabet/m.png", "images/alfabet/p.png", "images/alfabet/b.png", "images/alfabet/r.png", "images/alfabet/e.png", "images/alfabet/l.png", "images/alfabet/a.png");
allArr = new Array(arr, baiat, colac, slapi, umbrela);
for(i=0; i<allArr[0].length; i++)
{
var img = new Image();
img.src = allArr[0][i];
$('#array').append(img);
}
});
var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");
var imgNumber=0;
var numberOfImg = image.length;
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++;
}
document.slideImage.src = image[imgNumber-1];
contor++;
$("#array").empty();
for(i = 0; i<allArr[contor].length; i++)
{
var img = new Image();
img.src = allArr[contor][i];
$('#array').append(img);
}
}
if(document.images){
var image1 = new Image();
image1.src = "images/vapor.png";
var image2 = new Image();
image2.src = "images/baiat.png";
var image3 = new Image();
image3.src = "images/colac.png";
var image4 = new Image();
image4.src = "images/slapi.png";
var image5 = new Image();
image5.src = "images/umbrela.png";
}
HTML:
<img src="images/vapor.png" name="slideImage" class='secondcanvas' width='450' height='300' alt="">
<div id="array" class='thirdcanvas'></div>
<img id="nextimageandshuffle" src="images/nextBtn.png" title="Continuare" >

I'm not sure if I fully understand what you are trying to do, but I think I got it...
You will need to determine if you are on the last image or not, because if your not you still want to empty the element. Compared the current images src to the string in allArr[4][4] and if they match, don't do the .empty(). So instead of just:
$("#array").empty();
You will want to replace it with something like:
if(img.src == allArr[4][4]){
return;
}else{
$("#array").empty();
}

Not sure if I really understood what your problem is. However if you want to keep the last image in your div tag after calling empty(), you just have to append it again :
$("#array").empty();
var lastImage = new Image();
lastImage.src = allArr[4][4];
$("#array").append(lastImage);
Please tell me if this helps or not.

js loading images

I have this code
var a = new Image();
a.src = objects.a.image;
var b = new Image();
b.src = objects.b.image;
var x = new Image();
x.src = objects.x.image;
I have about 10 images like this, is there any better way to load it into variables?

This should work
for(var i in objects)
{
if(objects[i].image)
{
var oImage = new Image();
oImage.src = objects[i].image;
// if you need the Image object you can store it somewhere
objects[i].oImgObject = oImage;
}
}

Assuming objects contains just images, try this:
var imageList = [];
for (var i in objects) {
var obj = objects[i];
var img = new Image();
img.src = obj.image;
imageList.push(img);
}

You normally would use an array to store your images.
For example :
var arr = [];
for (var c='a'.charCodeAt(0); c<='x'.charCodeAt(0); c++) {
var img = new Image();
img.src = objects[String.fromCharCode(c)].image;
arr.push(img);
}
If you really need to add them as variables to the global context, you might do this :
for (var c='a'.charCodeAt(0); c<='x'.charCodeAt(0); c++) {
var img = new Image();
var name = String.fromCharCode(c);
img.src = objects[name].image;
window[name] = img; // better use somthing's else than window...
}
Note that depending on what really is objects, there might be a more straightforward solution.

You can iterate through the properties of your objects object. Creating a new image per iteration, giving it the source of the property on your objects. Then adding it to the array:
Demo
var arrayOfImg = [];
for(var propt in objects){
var image = new Image();
image.src = objects[propt].image;
arrayOfImg.push(image)
}
console.log(arrayOfImg);