javascript - 如何使用纯javascript从spritesheet中提取精灵
问题描述
所以我有这个精灵表,里面有来自塞尔达传说的所有不同的瓷砖有没有一种方法可以让我进入像 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,我会更喜欢
解决方案
您的代码中的一些问题...
- 您需要一个 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 + "'/>");
}
推荐阅读
- c# - NuGet - 在构建时获取最新的 lib 版本
- python - 使用 dataframe.column 重命名列后,熊猫合并给出 Nan 值
- javascript - 在小数范围内调整位置
- azure - Azure 区域中托管的 HANA 数据库和 SAP 具有高延迟
- javascript - 在另一个 div 中滚动时更改 div 背景颜色
- tomcat - Apache tomcat 从版本 7 升级到 9
- oracle - ORA-01873: 返回 INTERVAL DAY TO SECOND 的领先精度
- c++ - 如何在 C++ 中跨库共享对象
- python - 如何从多个不同类型的字符串列表中获取所需的值
- c# - ZPL 不会打印 Y >= 90