如何使用Javascript從紋理圖集獲取圖像？

Question

一個包含精靈的精靈圖片對象...

var spritesheet = new Image(); spritesheet.src ="foo.png";

我希望能夠從該spritesheet變量中獲得具有所需x，y，寬度和高度的子圖像。 然后分配一個變量，該變量是Spritesheet的子圖像。

我怎么做？

Answer 1

將div與backgroundPosition一起使用使此操作變得容易，因為它將為我們自動剪輯 ，而不必使用overflow 。

例如，這是流行的Cookie Clicker空閑游戲的紋理圖集 。

使用x和y的負偏移量，我們可以從紋理圖集中選擇一個子精靈：

 // Inputs -- change this based on your art var tw = 48; // Texture Atlas Tile Width (pixels) var th = 48; // Texture Atlas Tile Height (pixels) var tx = 3; // tile index x (relative) (column) var ty = 2; // tile index y (relative) (row) var src = 'http://orteil.dashnet.org/cookieclicker/img/icons.png'; // Calculations -- common code to sub-image of texture atlas var div = document.getElementById('clip'); var x = (tx*tw); // tile offset x position (absolute) var y = (ty*th); // tile offset y position (absolute) div.style.width = tw + 'px'; div.style.height = th + 'px'; div.style.backgroundImage = "url('" + src + "')"; div.style.backgroundPosition = '-' + x + 'px -' + y + 'px'; // You don't need the remaining parts. They are only to // show the sub-sprite in relation to the texture atlas div.style.border = "1px solid blue"; // only for demo purposes // highlight where in the original texture the sub sprite is var rect = document.getElementById('sprites').parentNode.getBoundingClientRect(); var hi = document.getElementById('highlight'); hi.style.zIndex = 999; // force to be on top hi.style.position = "absolute"; hi.style.width = tw + 'px'; hi.style.height = th + 'px'; hi.style.left = (rect.left + x) + 'px'; hi.style.top = (rect.top + th + y) + 'px'; // skip sub-sprite height hi.style.border = '1px solid red'; 

 <div id="clip"></div> <img id="sprites" src="http://orteil.dashnet.org/cookieclicker/img/icons.png"> <div id="highlight"></div> 

Answer 2

這是一種方法：

• 創建一個內存畫布以從Spritesheet裁剪子精靈像素，並在該畫布上繪制這些裁剪的像素

• 從畫布的dataURL創建一個新的子圖片圖像。

示例代碼（未經測試-可能需要tweeking）：

var spritesheet = new Image();
spritesheet.onload=function(){

    // specify desired x,y,width,height
    // to be clipped from the spritesheet
    var x=0; 
    var y=0;
    var w=10;
    var h=10;

    // create an in-memory canvas
    var canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');

    // size the canvas to the desired sub-sprite size
    canvas.width=w;
    canvas.height=h;

    // clip the sub-sprite from x,y,w,h on the spritesheet image
    // and draw the clipped sub-sprite on the canvas at 0,0
    ctx.drawImage(spritesheet,  x,y,w,h,  0,0,w,y);

    // convert the canvas to an image
    var subsprite=new Image();
    subsprite.onload=function(){ doCallback(subsprite); };
    subsprite.src=canvas.toDataURL();    

}
spritesheet.src ="foo.png";


function doCallback(img){
    // do something with the new subsprite image
}