From Javascript array to an image of some kind
Ok, so I have the following array of data:
shipGrid = [
['0','0','0','0','0','0','0','0','0','0'],
['0','开发者_如何学Python0','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:
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.
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>
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.
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
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.
加载中,请稍侯......
精彩评论