Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// This converts XIVDB's minion icons to an array of base64 URLs.
const config = {
method: 'GET',
mode: 'cors'
}
let x = 0;
let y = 0;
let output = {};
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = 40;
canvas.width = 0;
fetch("https://api.xivdb.com/mount?columns=icon", config)
.then(response => response.json())
.then(icons => {
new Promise(function(resolve, reject) { processIcons(icons, resolve, reject) })
.then(result => {
createSpriteSheet(result);
})
.catch(e => console.error(e));
})
.catch(e => console.error(e));
// http://stackoverflow.com/a/10073788/1317805
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
function processBlob(blob, resolve, reject) {
const reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
resolve(reader.result);
}
}
function processIcons(achievementIcons, finish, reject) {
let result = {};
let processed = 0;
let killed = false;
let icons = achievementIcons.forEach(data => {
const icon = data.icon;
const url = "https://secure.xivdb.com/img/game/" + pad(Math.floor(icon/1000) * 1000, 6) + "/" + pad(icon, 6) + ".png";
if (killed)
return;
fetch(url, config)
.then(response => response.blob())
.then(blob => {
new Promise(function(resolve) { processBlob(blob, resolve) })
.then(output => {
result[icon] = {
src: output
}
if (++processed === achievementIcons.length)
finish(result);
})
})
.catch(e => {
killed = true;
reject(e);
});
})
}
function createSpriteSheet(icons) {
const iconKeys = Object.keys(icons);
const total = iconKeys.length;
let n = 0;
new Promise(function(resolve, reject) { addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject) })
.then(response => {
console.info(canvas.toDataURL("image/png"));
console.info(output);
})
.catch(e => {
console.error(e);
})
}
function addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject) {
const icon = icons[iconKeys[n]];
if (iconKeys[n] == 0)
return addIconToSpriteSheet(icons, iconKeys, ++n, total, resolve, reject);
let img = document.createElement('img');
img.onload = (e) => {
let iconImage = e.path[0];
const canvasData = x > 0 ? context.getImageData(0, 0, canvas.width, canvas.height) : null;
if (canvas.height < iconImage.naturalHeight) {
canvas.height = iconImage.naturalHeight;
}
canvas.width += iconImage.naturalWidth;
if (canvasData)
context.putImageData(canvasData, 0, 0);
context.drawImage(img, x, 0, iconImage.naturalWidth, iconImage.naturalHeight);
output[iconKeys[n]] = {
x: x,
y: 0
}
x += iconImage.naturalWidth;
if (++n === total) {
resolve(true);
return;
}
addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject);
}
img.src = icon.src;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.