0
448
ViewsCómo extraer sprites de una hoja de sprites con javascript puro
Entonces, tengo esta hoja de sprites con todos los mosaicos diferentes de Legends of zelda. ¿Hay alguna forma en la que pueda ingresar una función como getTile (2,1) y devolvería la codificación base64 para el caballero?
Hasta ahora he probado esto
function getTiles() { var sprites = new Image(); sprites.src = 'https://cdn.glitch.me/b3505ee1-a321-48ea-baf5-d84841324af1%2Fd3b13ce6-f5ed-4122-9bd9-37f74d13d470.image.png?v=1634242985542'; allOverworldTiles = [] var i = 0; for (var top = 0; top < 8 * 17; top += 17) { for (var left = 0; left < 20 * 17; left += 17) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 16; canvas.height = 16; ctx.drawImage(sprites, left + 1, top + 1, 16, 16, 0, 0, 16, 16) } } var dataURL = canvas.toDataURL("image/png"); var newTab = window.open('about:blank', 'image from canvas'); newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>"); }Preferiría que la respuesta estuviera en javascript vainilla.
·
Juan Pablo Isaza
1 answers
Answer question0
Algunos problemas en su código...
- necesita un evento de carga para asegurarse de que la imagen se haya cargado antes de que pueda hacer algo
- necesita
sprites.crossOrigin="anonymous"o obtendrá un error de lienzo Tainted - su lógica no estaba clara, tenía un bucle doble pero solo uno para DataURL fuera del bucle
Aquí hay un prototipo de trabajo.
var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = canvas.height = 16; var sprites = new Image(); sprites.crossOrigin="anonymous" sprites.src = 'https://cdn.glitch.me/b3505ee1-a321-48ea-baf5-d84841324af1%2Fd3b13ce6-f5ed-4122-9bd9-37f74d13d470.image.png?v=1634242985542'; sprites.onload = getTiles function getTile(x, y) { ctx.drawImage(sprites, x * 17 + 1, y * 17 + 1, 16, 16, 0, 0, 16, 16) return canvas.toDataURL("image/png"); } function getTiles() { var knight1 = getTile(2, 1) document.write("<img src='" + knight1 + "'/>"); var knight2 = getTile(8, 1) document.write("<img src='" + knight2 + "'/>"); var knight3 = getTile(14, 1) document.write("<img src='" + knight3 + "'/>"); }
·
Juan Pablo Isaza
Report
Answer question