JavaScript - 拆分要存储在 2D Image() 数组中的图块集图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11533606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript - Splitting a tileset image to be stored in 2D Image() array
提问by test
Let's say I have this image:
假设我有这张图片：
and I have this 2D array tiles[].. and using Image()function... how can do I use the (what I assume be best way?) forloop to add each tile into the arrayso tile[0]through however many there are is read and used as Image()objects later to be painted on HTML5 canvas?
并且我有这个 2D 数组tiles[].. 并使用Image()函数......我如何使用（我认为是最好的方法？）for循环将每个图块添加到arraysotile[0]通过无论有多少被读取并用作Image()稍后的对象在 HTML5 画布上绘制？
采纳答案by Aesthete
I would..
我会..
- Figure out how many tiles wide and high this image is
- Draw the image to a canvas in memory, and use the context to get image data.
- Loop through and subimage each tile, storing in an array.
- 算出这张图片有多少块宽和高
- 将图像绘制到内存中的画布上，并使用上下文获取图像数据。
- 循环遍历每个图块并对其进行子图像处理，并存储在一个数组中。
Assuming:
假设：
imageWidth, imageHeight, tileWidth, tileHeight
图像宽度、图像高度、瓷砖宽度、瓷砖高度
All describe what their names suggest, and:
所有人都描述了他们的名字所暗示的内容，并且：
EDIT: Added image load as per comment, fixed wrongly name ImageWidthand ImageHeightto imageWidthand imageHeight
编辑：添加图片的加载按照评论，错误固定的名称ImageWidth，并ImageHeight以imageWidth和imageHeight
EDIT: Performing code inside imageObj.onloadas the image is drawn here, drawImage() from origin (0,0)
编辑：在imageObj.onload此处绘制图像时在内部执行代码，drawImage() from origin (0,0)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "tilesetImageLocationHere";
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
Then, split up your image into a list of tile data..
然后，将您的图像拆分为平铺数据列表。
var tilesX = imageWidth / tileWidth;
var tilesY = imageHeight / tileHeight;
var totalTiles = tilesX * tilesY;
var tileData = new Array();
for(var i=0; i<tilesY; i++)
{
for(var j=0; j<tilesX; j++)
{
// Store the image data of each tile in the array.
tileData.push(ctx.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
}
}
//From here you should be able to draw your images back into a canvas like so:
ctx.putImageData(tileData[0], x, y);
}
回答by jeschafe
ok I did this on my localhost: it should give you a base at least. I think you should be able to use this straight outta the box but you might have to make a few calculation adjustments for it depending on what you want. I just don't think it's neccessary to spend thee time to perfect it to your example:
好的，我在我的本地主机上做了这个：它至少应该给你一个基础。我认为您应该可以直接使用它，但您可能需要根据需要对其进行一些计算调整。我只是认为没有必要花时间将其完善到您的示例中：
You'll obviously have to point the image to your own image.
您显然必须将图像指向您自己的图像。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('fakeCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '/theImage.png';
var tiles = [];
var imageTileNumWidth = 23;
var imageTileNumHeight = 21;
img.onload = function(){
var imageWidth = img.width;
var imageHeight = img.height;
sndCanvasWidth = imageWidth/imageTileNumWidth;
sndCanvasHeight = imageHeight/imageTileNumHeight;
canvas.width = imageWidth;
canvas.height = imageHeight;
ctx.drawImage(img,0,0,imageWidth,imageHeight);
var sndCanvas = document.getElementById('drawCanvas');
sndCanvas.width=sndCanvasWidth;
sndCanvas.height=sndCanvasHeight;
var i=0;
var j=0;
var t=0;
for(i=0;i<imageWidth;i+=sndCanvasWidth){
for(j=0;j<imageHeight;j+=sndCanvasHeight){
var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);
var ctx2 = sndCanvas.getContext("2d");
ctx2.putImageData(myImageData,0,0);
tiles.push(myImageData);
}
}
};
});
</script>
</head>
<body>
<canvas id="fakeCanvas"></canvas>
<canvas id="drawCanvas"></canvas>
</body>
</html>
