ouroboros-gorup/Mastodon-Circles
1
0
Fork 0
mirror of https://github.com/AMNatty/Mastodon-Circles.git synced 2024-11-21 18:47:26 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

ich dreh durch

Browse source
This commit is contained in:
Andreas Grasser 2022-11-28 20:43:16 +01:00
parent 8d9b8de959
commit 444fca6a13
No known key found for this signature in database
GPG key ID: A6A70D76EF291D77
3 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
create-circle.js
View file

@ -166,8 +166,6 @@ function showConnections() {
}
//document.getElementById("outDiv").innerText = JSON.stringify(userDataExport);
// Render the Objects
document.getElementById("btn_download").style.display = "inline";
render(items);
}
@ -193,20 +191,4 @@ function httpRequest(url, callback, callbackVal=null)
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function downloadImage(){
var lnk = document.createElement('a'), e;
lnk.download = 'mastodon-circle.png';
lnk.href = document.getElementById("canvas").toDataURL("image/png;base64");
if (document.createEvent) {
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false,
false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
lnk.fireEvent("onclick");
}
}
}

10
image.js
View file

@ -4,9 +4,11 @@ const dist = [200, 330, 450];
const numb = [8, 15, 26];
const radius = [64,58,50];
let userNum = 0;
let remainingImg = 1;
function render(users) {
userNum = 0;
remainingImg = 1;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
@ -28,6 +30,7 @@ function render(users) {
// loop over each circle of the layer
for (let i = 0; i < numb[layerIndex]; i++) {
remainingImg += 1;
// if we are trying to render a circle but we ran out of users, just exit the loop. We are done.
if (userNum>=users.length) break;
// We need an offset or the first circle will always on the same line and it looks weird
@ -85,6 +88,13 @@ function loadImage(ctx, url, x, y, r) {
ctx.clip();
ctx.closePath();
ctx.restore();
remainingImg -= 1;
console.log(remainingImg);
if (remainingImg == 0) {
document.getElementById("btn_download").href = document.getElementById("canvas").toDataURL("image/png;base64")
document.getElementById("btn_download").style.display = "inline";
}
};
img.src = url;
}

3
index.html
View file

@ -18,7 +18,8 @@
<br><br>
<!-- Buttons -->
<button id="btn_create" onClick="circle_main()">Circle Erstellen</button>
<button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button>
<a href="" id="btn_download" class="button" download="mastodon-circle.png" style="display: none;">DOWNLOAD (klappt wsl nicht)</a>
<!-- <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button> -->
<br><br>
<!-- Canvas for the final Image -->
<canvas id="canvas" width="1000" height="1000"></canvas>