如何使用纯javascript从spritesheet中提取精灵答案

【问题标题】：How to extract sprites from a spritesheet with pure javascript如何使用纯javascript从spritesheet中提取精灵
【发布时间】：2021-12-03 05:39:24
【问题描述】：

所以我有这个精灵表，上面有塞尔达传说中所有不同的瓷砖，有没有一种方法可以让我输入像 getTile(2,1) 这样的函数，它会返回骑士的 base64 编码？

到目前为止，我已经尝试过了

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'/>");
}

如果答案是香草 javascript，我会更喜欢

【问题讨论】：

标签： javascript dom html5-canvas sprite sprite-sheet

【解决方案1】：

您的代码存在一些问题...

您需要一个 onload 事件来确保图像已加载，然后您才能执行任何操作
你需要sprites.crossOrigin="anonymous" 否则你会得到一个被污染的画布错误
你的逻辑不清楚，你有一个双循环，但循环外只有一个 toDataURL

这是一个工作原型

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 + "'/>");
}

【讨论】：