All geek questions in one place

Javascript Splitting an image in the form of a tile for storage in an array of 2D Image ().

Let's say I have this image:

enter image description here

and I have this 2D array of tiles[] .. and using the Image() function ... how can I use (as I guess the best way?) a for loop to add each fragment to array so tile[0] through all that is, is and is read and used as Image() objects that will later be drawn on HTML5 canvas?

+6
source share
3 answers

I would..

  • Determine how many tiles are wide and high.
  • Draw the image on the canvas in memory and use the context to get the image data.
  • Scroll and create each fragment, saving in an array.

Assuming:

imageWidth, imageHeight, tileWidth, tileHeight

Everyone describes what their names offer, and:

EDIT: added loading of the image according to the comment, the name ImageWidth and ImageHeight to ImageWidth and ImageHeight

EDIT: Code execution inside imageObj.onload , as shown in the picture, drawImage () from the beginning (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 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); }
+4
source

I am on my iPad, so it’s not easy to get an example, but if you don’t mind the library, go to EaselJs. He has SpriteSheets that will do what you want.

http://www.createjs.com/Docs/EaselJS/SpriteSheet.html

+1
source

ok I did this on my localhost: it should give you the base, at least. I think you can use it right out of the box, but you may have to make a few adjustments to calculate depending on what you want. I just don't think you need to spend your time to improve it in your example:

You will 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>
0
source

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

More articles:


All Articles