Trying to make a ascii-like code generator

JavaScript
1

I am trying to create my own ascii code maker;
I will add on to it but I can’t even get this much to work…

<input type="file" name="imagefile" id="imagefile">

<button onclick="generateAnsi();">GenerateAnsi</button>

<script>function generateAnsi(){
        for (e=1;e<4096;e++) {
            var idata = document.getElementById('imagefile').getImageData;
            if (idata[e] >= 0) {document.getElementById('box').innerHTML = "#"} 
            else {document.getElementById('box').innerHTML = "&bnsp";};
        };

    };</script>

<div id="box"></div>
2

What do you mean by not working? What doesn’t it do that you expect it to? Have you tried outputting to the console log at various parts of your script to see what’s happening?

Edit: Have you checked the console to see if there are any errors?

1 Like
3

well for starters &bnsp doesnt mean anything to a browser. You’re trying to type "&nbsp;" (for Non-Breaking SPace).

the second thing is that an element does not have a getImageData attribute. If you’re trying to get the image data from a canvas’s context, you need to get the context first, and then call the getImageData function on that context.

the third thing is that even when you do get the image data from a context, it is not an array to be accessed, it contains an attribute, .data, which holds the image data in an array of size 4*number-of-pixels.

2 Likes
4

okay so now I am hear, and still no luck…

  <script>

	 function generateAnsi(){

			for (e=1;e<4096;e++) {
			    var idata = document.getElementById('imagefile');
			    idata = idata.getContext;
			    idata = idata.getImageData;
			    idata = idata.data;
				if (idata[e] >= 1) {document.getElementById('box').innerHTML = "#";} 
				else {document.getElementById('box').innerHTML = "&nbsp";};
			};
			
		};

		</script>

I am just looking for some output at this point - some sign of life

5

What does your console tell you?

6

Thanks, I am working on it; my error log states cannot read property getImageData of undefined, so I am working on this now.

7

that’s because getContext and getImageData are functions, not properties.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.