All geek questions in one place

From a Javascript array to some kind of image

So, I have the following data array:

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']];

What I translated into this interactive group <li>: alt text

Is it possible to convert this array from <li>to an image of some? It should not be just PNG, GIF or JPG - it can be a thing based on SVG or Vector.

I am a little puzzled, I would like to do this without a server language, so I thought maybe in the SVG library or it will work fine ...?

Greetings.

edit: This is necessary for viewing in the browser itself.

+3
source share
3 answers

SVG, , , . , HTML 5 <canvas>. , , canvas Internet Explorer 9. ExplorerCanvas - , .

<!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.

Google Chrome.

HTML5 canvas. Mozilla Developer Network . Bill Mill.

+2

"Portable Bitmap Format" (PBM), ASCII

, ASCII

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

, , .

JavaScript, . . : http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm

Edit:

, . :

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

+1

Javascript HTML , Ajax , .

, shipGrid , .

Not knowing which server languages ​​are available to you, we cannot help further, but any image plugin should have extensive documentation and examples.

Edit

Forgot about SVG, you could get JS to dynamically display the SVG image for you, 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 with.

0
source

Source: https://habr.com/ru/post/1783819/

More articles:


All Articles