Tak mnie naszło by coś jeszcze dopisać do skryptu co zrobiłem wcześniej. Inspiracją był steemd, gdzie zobaczyłem że każdy użytkownik ma swojego niepowtarzalnego awatara.
Postanowiłem zrobić taki wykres, na którym zamiast słupków będą wygenerowane awatary. Efekt widać poniżej:
Link do skryptu:
https://fatmusicpl.github.io/voters.github.io/
Link to repozytorium:
https://github.com/fatmusicpl/voters.github.io
Całość nie jest skomplikowana:
function drawImages() {
ctx = demo.getContext('2d');
var x = 0;
var max = parseInt(150 / voters[0].SBD);
voters.forEach(function(vote) {
if (vote.SBD >= 0.001) {
let size = 24 + parseInt(max * vote.SBD);
drawImage(vote.name, size, x, 150 - size);
x = x + (size / 3);
}
});
ctx.font = "32px Comic Sans MS";
ctx.fillStyle = "#337ab7";
ctx.textAlign = "center";
ctx.fillText('@' + author + ' voters', 600, 30);
ctx.font = "18px Comic Sans MS";
ctx.fillText(summarySBD + ' SBD', 600, 55);
ctx.fillText(summaryVotes + ' Votes', 600, 75);
ctx.fillText(summaryVoters + ' Voters', 600, 95);
}
function drawImage(name, size, x, y) {
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://robohash.org/' + name.replace("@", "") + '.png?size=128x128';
img.onload = function() {
ctx.drawImage(img, x, y, size, size);
}
}
Źródła:
https://steemd.com/ - Inspiracja
https://robohash.org - Obrazki
https://www.w3schools.com/graphics/canvas_text.asp
https://stackoverflow.com/questions/18770039/put-text-on-an-image-and-save-as-image