Question

好的，所以我有以下数据数组：

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

我已将其翻译为<li>的可点击组： alt text

是否可以将此<li>数组转换为某种形象？它不一定只是PNG，GIF或JPG - 它可以是SVG或基于矢量的东西。

我有点难过，我想在没有服务器端语言的情况下这样做 - 所以我想也许是一个SVG库或者能够很好地工作......？

干杯。

编辑：这需要在浏览器中查看。

Answer 1

由于您提到SVG，我猜您可以接受只适用于现代浏览器的解决方案。如果是这样，您应该明确地查看HTML 5 <canvas>元素。但请注意，在版本9之前，Internet Explorer中将不支持canvas元素。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中进行了测试。

Dive Into HTML5在canvas元素上有一个很好的章节。其他资源是Mozilla Developer Network的Canvas tutorial。您还可以查看Bill Mill's canvas tutorial。

Answer 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

修改

是的，此图像类型不会显示在浏览器中。请通过浏览器查看以下链接以获取支持的图像类型：

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

Answer 3

Javascript无法将HTML单独转换为图像，您需要使用Ajax和服务器端插件为您执行此操作。

我会通过将shipGrid数据发送到服务器来解决这个问题，该服务器解释发送的数据并以所需的样式呈现图像。

在不知道您可以使用哪种服务器端语言的情况下，我们无法提供更多帮助，但任何图像插件都应该包含大量文档和示例。

修改

忘了SVG，你或许可以让JS为你动态渲染SVG图像，看看这个俄罗斯方块的例子：

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

看看来源，应该给你一些工作。

从Javascript数组到某种形象

3 个答案: