从Javascript数组到某种图像
好的，我有以下数据数组：从Javascript数组到某种图像,javascript,arrays,image,Javascript,Arrays,Image,好的，我有以下数据数组： 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
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']];
组：
是否可以将此数组转换为某种图像？
它不必只是一个PNG、GIF或JPG，它可以是SVG或基于矢量的东西
我有点不知所措，我希望不用服务器端语言就可以做到这一点——所以我想也许一个SVG库或者可以很好地工作
干杯
编辑：这需要在浏览器本身中查看。Javascript本身无法将HTML转换为图像，您需要Ajax和服务器端插件来完成这项工作
我将通过将shipGrid数据发送到服务器来解决这个问题，服务器将解释发送的数据并以所需的样式呈现图像
在不知道您可以使用哪些服务器端语言的情况下，我们无法提供进一步的帮助，但是任何图像插件都应该有大量的文档和示例
编辑
忘记SVG，您可能可以让JS为您动态呈现SVG图像，看看这个俄罗斯方块示例：
看一看源代码，应该会给您一些工作依据。既然您提到了SVG，我想您可以接受一个只在现代浏览器中工作的解决方案。如果是这样的话，您应该谨慎地查看HTML5
元素。但是请注意，InternetExplorer在版本9之前不支持canvas元素。是一个开源项目，试图填补这个空白，但我还没有尝试过
<!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>
从JavaScript数组到画布
身体{
背景色：#eee；
}
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'）；
//Internet Explorer 9将支持getContext。
if（imageCanvas.getContext）{
imageCanvas.height=imageArray.length；
imageCanvas.width=imageArray[0]。长度；
var imageContext=imageCanvas.getContext（“2d”）；
imageContext.fillStyle=“#fff”；
imageContext.fillRect（0,0，imageCanvas.width，
(1.身高),；
imageContext.fillStyle=“#000”；
对于（var x=0；x
上面的代码只在Google Chrome上测试过
关于canvas元素有一个很好的章节。其他资源包括Mozilla开发者网络。您还可以查看。一种简单的方法是将其保存到一个简单的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
在这个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保存此内容，则用户的浏览器安全设置可能会阻止您执行此操作。请参阅以下链接：
编辑：
是的，此图像类型不会显示在浏览器中。查看以下链接，了解按浏览器支持的图像类型：
您需要多少与旧版浏览器兼容的背景词？我真的不需要太多，它将基于CSS3，无论如何我似乎无法在浏览器中显示，PPM不是一种有效的图像浏览器格式吗？显然不是。我不知道你需要在浏览器中显示