From Javascript array to an image of some kind

Question

Ok, so I have the following array of data:

shipGrid = [
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','1','0','0','0','0','1','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','1','1','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','1','0','0','0','0','1','0','0'],
                ['0','0','0','1','1','1','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0']];

Which I have translated into this clickable group of <li>'s: alt text

Is it possible to convert this array of <li>'s into an image of somekind? It doesn't have to be just a PNG, GIF or JPG - it can be a SVG or Vector based thing.

I'm a bit stumped, I'd like to do it without a server side language - so I thought maybe a SVG library or would work well...?

Cheers.

edit: This needs to be viewable in the browser itself.

How much backwords compatility with older browsers do you need? — Jan Aagaard
– Jan Aagaard, Commented Jan 6, 2011 at 9:29
I don't really need a lot, it's going to be CSS3 based anyway — Barrie Reader
– Barrie Reader, Commented Jan 6, 2011 at 11:10

Matt · Accepted Answer · 2012-04-26 09:04:48Z

Since you're mentioning SVG I guess that you could accept a solution that would only work in modern browsers. If so, you should defenitely take a look at the HTML 5 <canvas> element. Note however, that the canvas element will not be supported in Internet Explorer until version 9. ExplorerCanvas is an open source project that tries to fill in that gap, but I have not tried it.

<!DOCTYPE html>
<html>
    <head>
        <title>From JavaScript array to canvas</title>
        <style>
            body {
                background-color: #eee;
            }
        </style>
    </head>
    <body>
        <canvas id="image"></canvas>
        <script>
            var imageArray = [
                [0,0,0,0,0,0,0,0,0,0],
                [0,0,0,0,0,0,0,0,0,0],
                [0,0,1,0,0,0,0,1,0,0],
                [0,0,0,0,0,0,0,0,0,0],
                [0,0,0,0,1,1,0,0,0,0],
                [0,0,0,0,0,0,0,0,0,0],
                [0,0,1,0,0,0,0,1,0,0],
                [0,0,0,1,1,1,1,0,0,0],
                [0,0,0,0,0,0,0,0,0,0],
                [0,0,0,0,0,0,0,0,0,0]
            ];

            var imageCanvas = document.getElementById('image');

            // getContext will be supported in Internet Explorer 9.
            if (imageCanvas.getContext) {
                imageCanvas.height = imageArray.length;
                imageCanvas.width = imageArray[0].length;

                var imageContext = imageCanvas.getContext("2d");

                imageContext.fillStyle = "#fff";
                imageContext.fillRect(0, 0, imageCanvas.width,
                    imageCanvas.height);

                imageContext.fillStyle = "#000";
                for (var x = 0; x < imageCanvas.width; x++) {
                    for (var y = 0; y < imageCanvas.height; y++) {
                        if (imageArray[y][x] === 1) {
                            imageContext.fillRect(x, y, 1, 1); 
                        }
                    }
                }
            }
        </script>
    </body>
</html>

Above HTML as renderend in Google Chrome.

The code above has only been tested in Google Chrome.

Dive Into HTML5 has a nice chapter on the canvas element. Other resources are Mozilla Developer Network's Canvas tutorial. You could also take a look at Bill Mill's canvas tutorial.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

A simple way of doing this would be to save it into Portable Bitmap Format (PBM), which it just a simple ASCII file

The above example might look sonmething like the following in the contents this ASCII file

P1
# This is a smiley
10 10
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 1 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 1 1 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 1 0 0
0 0 0 1 1 1 1 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0

It's pretty trivial to convert tour array into a map like the above.

If you're saving this from JavaScript then the user's browser security settings may prevent you from doing this. See the following link: http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm

Edit:

Yeah, this image type won't display in the browser. Check out the following link for supported image types by browser:

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 6, 2011 at 9:27

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

2 Comments

Barrie Reader Over a year ago

I cann't seem to get this to display in browser, is PPM not a valid browser format for images?

Mutation Person Over a year ago

Obviously not. I wasn't aware you needed to be displayed in the browser

Tom Gullen · Accepted Answer · 2011-01-06 09:25:42Z

0

Javascript can't convert HTML into images by itself, you will need Ajax and a server side plugin to do this for you.

I would tackle this problem by sending the shipGrid data to the server, which interprets the sent data and renders the image in the desired style.

Without knowing what server side languages you have available to you we can't assist further, but any image plugin should have extensive documentation and examples.

Edit

Forgot about SVG's, you might be able to get JS to dynamically render an SVG image for you, take a look at this tetris example:

http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg

Take a look at the source, should give you something to work by.

answered Jan 6, 2011 at 9:25

Tom Gullen

61.9k89 gold badges294 silver badges472 bronze badges

Collectives™ on Stack Overflow

From Javascript array to an image of some kind

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related