AboutAnthony Levensalor Experience I have been programming in Java and Javascript since 1998. I run a web development company that specializes in Ajax front ends with PHP/MySQL back ends. I am a Sun Certified Java 2 Developer, and have done nothing but web applications for the last two years in my business
Past/Present clients Monster.com, Compuware Corporation, Flextronics International, Pragmatech Software, Open Travel Software, The Loss Mitigation Institute, Raw Story Media, Page One News Media.
Expert: Anthony Levensalor Date: 1/18/2008 Subject: Data input to Javascript arrays
Question QUESTION: I'd trying to do some image processing with Javascripts.
(No joke!) Anyway, I've found that I can get a whole image
worth of pixel values into Javascript arrays by reading
from pre-written ASCII lists of pixel values, like this:
function loaddata() {
var imagedata = new Array(`cat pixel_data.txt`);
}
[where pixel_data.txt contains "2342, 1242, 2365, ", etc.],
or more elaborate methods, like calling a script that
get pixel values from another file: but each method of
this sort that I use relies upon the underlying operating
system (Linux) and those back-quote characters, `....`.
Now, the problem is, I want the function loaddata() to
run only at a certain time -- such as, when I've loaded
an image, e. g.,
But of course the material in the `...` characters seems to
get run immediately when the page is loaded, and is NOT
run when I want it to get run -- e. g., when the image has
finished loading. The image loads, and loaddata() is
called (alerts() tell me so), but the `cat ...` stuff isn't
run again.
My questions are:
1) Is there any simple means of fixing this admittedly
quick and dirty method of data input?
2) Is there any more acceptable means of getting lots of
data into Javascript arrays?
ANSWER: The answer to both is yes. There's nothing wrong with storing the data in a text file somewhere on your server, and then loading it dynamically. Looks like you're loading it before the page is even sent to the browser.
You could fix the problem with dynamic script insertion. Basically, the steps are:
1. Create a script element
2. Populate it
3. Remove the script element.
So what I would do is store the image data as a js function in and of itself in a separate file, like imageData.js
That file would do a couple of things. It would define the global variable imageData and assign it:
The code below is in array literal syntax.
[contents of imageData.js]
var imageData =
[223,245,0,0,12,1,2,3..............n]
[/contentd of imageData.js]
So once we get to the image tag, we code it like this:
<img src="whatever.jpg" onload="loadData()">
And the script for the loadData function:
<script type="text/javascript">
function loadData {
var scriptElm = document.createElement("script")
scriptElm.src = "loadData.js"
var headElm = document.getElementsByTagName("head")[0]
headElm.appendChild(scriptElm);
headElm.removeChild(scriptElm);
} // loadData
</script>
And that should make your problem go away. If not, send the offensive code to anthony--javageek--@my-javageek-petprogrammer.com, and I will handle it in a more thorough manner.
(Remove --javageek-- from my email above to send)
All the best,
Anthony
---------- FOLLOW-UP ----------
QUESTION: Thank you for your prompt reply, I greatly appreciate it. But I'm a little lost on the details. Such as: how do I
access the imageData values once they've been read in like
this? And where are they? When I look at the resulting
HTML source, there's no variable named imageData.
I've tried it on both the array literal syntax and exact
Javascript syntax, e. g., on two different files which
contain
var imageData =
[223,245,0,0,12,1,2,3]
and
var imageData = new Array(223, 245, 0, 0, 12, 1, 2, 3);
and it didn't work for either.
Answer Let me have a look at the script, perhaps paste the url here so that I can go take a look. It's very difficult to diagnose and repair code that I cannot see, I may be missing critical details that would allow me to help in a more efficient way.
