How to import Textures and Images from a sprite sheet?

Questions
7

This is what came to my mind at first, but unfortunately you can’t apply CSS to image data in Javascript. “Styling” an element and taking a screenshot of it is only possible with <canvas>, see jquery - How to take screenshot of a div with JavaScript? - Stack Overflow

The idea is to have a canvas that is the exact size of the sprite and then do:

        var ctx = document.getElementById("myCanvas").getContext("2d");  
        var img = new Image():  
        img.src = "/images/example_sheet.png";  

        ctx.drawImage(img,-xSpriteCoord,-ySpriteCoord);  

        // then screenshot the canvas
       dataUrl = canvas.toDataURL(),
       imageFoo = document.createElement('img');
       imageFoo.src = dataUrl;

imageFoo is now an HTMLImageElement that you can use for the GUI.

2 Likes