Clarification and some assistace in my javascript code - javascript

I have a question and also in need for help with my code.
I'm trying to create a script that can update metadata on picture. user can upload multiple images and the script automatically update the metadata like latitude and longitude from a list.
As i am a newbie in java script i can not understand why when i pass all my coordinates inside reader.onload it only take the last one and assign it to all my pictures.
My idea is: I loop through the images and assign to each image one coordinate chronologically, then i convert the coordinate to exifByte. Till here is all working fine but when i try to attach the exifByte to each image inside reader.onload it takes the last coordinate and assign it to all my images.
I hope the code below is clear enough for you guys
Any explanation or help would be much appreciated
Thanks
<script>
function Initialize() {
var fileCatcher = document.getElementById('file-catcher');
var fileInput = document.getElementById('file-input');
var fileListDisplay = document.getElementById('file-list-display');
var fileList = [];
var renderFileList, dispimg;
var x = [];
var jpeg;
fileInput.addEventListener('change', function (evnt) {
var files = evnt.target.files;
fileList = [];
for (var i = 0; i < fileInput.files.length; i++) {
fileList.push(fileInput.files[i]);
var file = fileInput.files[i];
x = (i);
var gpsIfd = {};
var rutedata = '<?php echo "$str" ?>';
points = rutedata.split(";").reverse();
for (var j=0; j<(points.length-x); j++) {
var mData = points[j].split(',');}
console.log("current point:");
console.log(x)
var lat = (mData[0]);
var lng = (mData[1]);
gpsIfd[piexif.GPSIFD.GPSLatitudeRef] = lat < 0 ? 'S' : 'N';
gpsIfd[piexif.GPSIFD.GPSLatitude] = piexif.GPSHelper.degToDmsRational(lat);
gpsIfd[piexif.GPSIFD.GPSLongitudeRef] = lng < 0 ? 'W' : 'E';
gpsIfd[piexif.GPSIFD.GPSLongitude] = piexif.GPSHelper.degToDmsRational(lng);
var exifObj = { "GPS":gpsIfd};
var exifBytes = piexif.dump(exifObj);
var c = document.createDocumentFragment();
var reader = new FileReader();
reader.onload = (e) => { // this is the problem loop only the last point'
var jpeg = piexif.insert(exifBytes, e.target.result);
console.log(lat); // here is logging the last point only
var image = new Image();
image.src = jpeg;
image.width = 500;
var el = $("<div></div>").append(image);
$("#resized").prepend(el);
};
reader.readAsDataURL(fileInput.files[i]);
}
renderFileList();
});
}
</script>

Since reader is async in nature, you get the last lat-lang. You can use closure to keep data. Else create a function to pass data.
More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
(function (byte, lats) {
var reader = new FileReader();
reader.onload = (e) => {
var jpeg = piexif.insert(byte, e.target.result);
console.log(lats); // here is logging the last point only
var image = new Image();
image.src = jpeg;
image.width = 500;
var el = $("<div></div>").append(image);
$("#resized").prepend(el);
};
})(exifBytes, lat);

Related

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;
}

How to change the position randomly?

var imgOut = function(){
var outImg = Math.floor(Math.random()*slideRandom.length);
document.getElementById("random").src = imgRandom[outImg];
var outSlide = slideRandom[outImg];
outSlide();
var wr = Math.floor(Math.random()*imgRandom.length);
var btl = Math.floor(Math.random()*bottle.length);
document.getElementById("bottle2").src = bottle[outImg];
document.getElementById("bottle1").src = bottle[btl];
document.getElementById("bottle3").src = bottle[wr];
/* try below but doesn't work or syntax error occured*/
var position= ['bottle[outImg]','bottle[btl]','bottle[wr]'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
pos1();
}
what I'm try to do is
with different arrays to get different each images in different random position.
I've done different images to get but with three different arrays to put in random position doesn't work. what have I done wrong? or how to change above code?
I don't understand your requirements exactly, but consider this code:
var setImage = function(id, src) {
document.getElementById(id).src = src;
};
var chooseOne = function(array) {
return array[Math.floor(Math.random()*array.length)];
};
var setRandomImages = function() {
setImage("bottle1", chooseOne(bottle));
setImage("bottle2", chooseOne(bottle));
setImage("bottle3", chooseOne(bottle));
};
If the array bottle is a list of URLs, this will do something, though I cannot guarantee it will do what you want.
var position= ['bottle[outImg]()','bottle[btl]()','bottle[wr]()'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
//pos1();
eval( pos1 );
// or
(new Function("return pos1"))();

Javascript global array accessing member undefined

var arrayTest;
function handleFiles(files) {
arrayTest = new Array();
for(var i = 0; files[i]; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var binary = e.target.result;
var parentSelector = '#output_' + i;
$(parentSelector).html(binary);
arraytest.push({ 'bin' : binary, 'parentSelector' : parentSelector });
};
reader.readAsBinaryString(files[i]);
}
}
function buttonClick() {
var files = [file1, file2];
handleFiles(files);
console.log(arrayTest); // I got the objects inserted at async function here, length != 0
console.log(arrayTest.length); // 0
console.log(arrayTest[0]); //undefined
// accesing any member of arrayTest returns undefined
}
FireFox Console output.
The code above shows a Js that converts files into binary string that is ran after a button event and I am having issues with being unable to access the global variable arrayTest that is updated with newly pushed value from the filereader onload event.Is there anyway to fix this problem?
Ok. I realized when I woke up that the point where console.log is executed, the async task might still be running which means that the arrayTest is incomplete, so what I this is what I did to fix the issue.
var arrayTest;
var asyncCount;
function handleFiles(files) {
arrayTest = new Array();
asyncCount = 0;
for(var i = 0; files[i]; i++) {
var reader = new FileReader();
asyncCount += 1;
reader.onload = function(e) {
var binary = e.target.result;
var parentSelector = '#output_' + i;
$(parentSelector).html(binary);
arrayTest.push({ 'bin' : binary, 'parentSelector' : parentSelector });
asyncCount -= 1;
if(asyncCount === 0) {
console.log(arrayTest);
console.log(arrayTest.length);
console.log(arrayTest[0]);
// at this point I am able to access all the array members.
}
};
reader.readAsBinaryString(files[i]);
}
}
function buttonClick() {
var files = [file1, file2];
handleFiles(files);
}

how to use drawImage after load all images in array

I want to draw image array with drawImage after all the images are loaded.There is a render problem with drawImage(), tried to solve with setTimeout() but its not working all the time.
Here is my code;
while(FocusItem.length>0)
{
FocusItem.pop();
}
ftx=canvas.getContext('2d');
focusImageBackground = new Image();
focusImageBackground.src = "./images/odaklanma/odaklanmaBackground.jpg";
if(RandomSoru==15)
finishSoru=true;
if(finishSoru)
{
RandomSoru = Math.floor((Math.random() * 15)+1);
tempRandomSoru=RandomSoru;
}
if(RandomSoru==tempRandomSoru)
{
RandomSoru = Math.floor((Math.random() * 15)+1);
}
var soru = new Object();
soru["image"] = new Image();
soru.image.src = './images/odaklanma/level/'+RandomSoru+'/soru.png';
soru["x"] = 341;
soru["y"] = 140;
FocusItem.push(soru);
var dogru = new Object();
dogru["image"] = new Image();
dogru.image.src = './images/odaklanma/level/'+RandomSoru+'/dogru.png';
dogru["x"] = xDogru;
dogru["y"] = 280;
FocusItem.push(dogru);
var yanlis = new Object();
yanlis["image"] = new Image();
yanlis.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis.png';
yanlis["x"] = xYanlis1;
yanlis["y"] = 280;
FocusItem.push(yanlis);
var yanlis2 = new Object();
yanlis2["image"] = new Image();
yanlis2.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis1.png';
yanlis2["x"] = xYanlis2;
yanlis2["y"] = 280;
FocusItem.push(yanlis2);
}
if(focusImageBackground.complete){
if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
drawFocus();
else
setTimeout(drawFocus,600);
}
else
focusImageBackground.onload=function(){
if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
drawFocus();
else
setTimeout(drawFocus,600);
}
function drawFocus(){
ftx.drawImage(focusImageBackground,0,0);
for (var i=0; i<FocusItem.length; i++){
FocusItem[i].image.onload=function(){
ftx.drawImage (FocusItem[i].image, FocusItem[i].x, FocusItem[i].y);
}
}
}
I'd suggest loading all your images, then when they are all done, you can call the rest of your code. I don't quite follow what you're trying to do with all the rest of your code, but here's a simple way to load an array of image URLs and know when they are done.
This is the general idea (I've left out lots of your code that has nothing to do with the central issue of knowing when all the images are loaded) and I've also tried to DRY up your code:
function createImagesNotify(srcs, fn) {
var imgs = [], img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
imgs.push(img);
img.onload = function() {
--remaining;
if (remaining == 0) {
fn(srcs);
}
};
// must set .src after setting onload handler
img.src = srcs[i];
}
return(imgs);
}
// here's your starting array of filenames
var fnames = ["soru.png", "dogru.png", "yanlis.png", "yanlis1.png"];
// insert your process to create RandomSoru here
var randomSoru = ....;
// build full urls array
var urls = [];
for (var i = 0; i < fnames; i++) {
urls.push('./images/odaklanma/level/' + RandomSoru + '/' + fnames[i]);
}
// load all images and call callback function when they are all done loading
var imgs = createImagesNotify(urls, function() {
// all images have been loaded here
// do whatever you want with all the loaded images now (like draw them)
});
This code is based on an earlier answer of mine here: Cross-browser solution for a callback when loading multiple images?

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);

Categories