DerEnderKeks/generator.html

## generator.html
<!DOCTYPE html>
<!--
This page can be used to generate multiple frames of my avatar with the eyes rotated. Could probably be adjusted to do other stuff as well..
-->
<html>

<head>
    <title>Generator</title>
</head>

<body>
    <input id="fileinput" type="file" accept=".svg" />
    <canvas id="canvas" width="256" height="256"></canvas>
    <div id="svg_container"></div>
    <script>
        let originalTransforms = new Map();
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const svg_container = document.getElementById('svg_container')
        const animate = async () => {
            const rotateEye = (side, deg) => {
                const eye_el = document.getElementById('eye_' + side);
                const bb = eye_el.getBBox();
                const c_x = bb.x + bb.width / 2;
                const c_y = bb.y + bb.height / 2;
                let attr = eye_el.getAttribute('transform') || ""
                if (originalTransforms.get(side)) {
                    attr = originalTransforms.get(side)
                } else {
                    originalTransforms.set(side, attr)
                }
                eye_el.setAttribute("transform", `${attr} rotate(${deg}, ${c_x}, ${c_y})`);
            }
            const timestamp = Date.now();
            const genImg = frame => {
                return new Promise(resolve => {
                    const svgString = new XMLSerializer().serializeToString(svg_container.querySelector('svg'));
                    var img = new Image();
                    var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
                    var url = URL.createObjectURL(svg);
                    img.onload = function () {
                        ctx.drawImage(img, 0, 0);
                        const png = canvas.toDataURL('image/png');
                        const link = document.createElement('a');
                        link.href = png;
                        link.download = "img_" + timestamp + "_" + frame + ".png"
                        document.body.appendChild(link);
                        link.click()
                        document.body.removeChild(link);
                        URL.revokeObjectURL(png);
                        return resolve()
                    };
                    img.src = url;
                })
            }
            const steps = 16;
            for (let i = 0; i < steps; i++) {
                const rot = 360 / steps * i
                rotateEye('l', rot);
                rotateEye('r', -rot);
                await genImg(i);
            }
        }

        document.getElementById('fileinput').addEventListener('input', (event) => {
            const reader = new FileReader();
            reader.addEventListener('load', (event) => {
                svg_container.innerHTML = atob(event.target.result.split(',')[1]);
                animate();
            });
            reader.readAsDataURL(event.target.files[0]);
        })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<!--
	This page can be used to generate multiple frames of my avatar with the eyes rotated. Could probably be adjusted to do other stuff as well..
	-->
	<html>

	<head>
	<title>Generator</title>
	</head>

	<body>
	<input id="fileinput" type="file" accept=".svg" />
	<canvas id="canvas" width="256" height="256"></canvas>
	<div id="svg_container"></div>
	<script>
	let originalTransforms = new Map();
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	const svg_container = document.getElementById('svg_container')
	const animate = async () => {
	const rotateEye = (side, deg) => {
	const eye_el = document.getElementById('eye_' + side);
	const bb = eye_el.getBBox();
	const c_x = bb.x + bb.width / 2;
	const c_y = bb.y + bb.height / 2;
	let attr = eye_el.getAttribute('transform') \|\| ""
	if (originalTransforms.get(side)) {
	attr = originalTransforms.get(side)
	} else {
	originalTransforms.set(side, attr)
	}
	eye_el.setAttribute("transform", `${attr} rotate(${deg}, ${c_x}, ${c_y})`);
	}
	const timestamp = Date.now();
	const genImg = frame => {
	return new Promise(resolve => {
	const svgString = new XMLSerializer().serializeToString(svg_container.querySelector('svg'));
	var img = new Image();
	var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
	var url = URL.createObjectURL(svg);
	img.onload = function () {
	ctx.drawImage(img, 0, 0);
	const png = canvas.toDataURL('image/png');
	const link = document.createElement('a');
	link.href = png;
	link.download = "img_" + timestamp + "_" + frame + ".png"
	document.body.appendChild(link);
	link.click()
	document.body.removeChild(link);
	URL.revokeObjectURL(png);
	return resolve()
	};
	img.src = url;
	})
	}
	const steps = 16;
	for (let i = 0; i < steps; i++) {
	const rot = 360 / steps * i
	rotateEye('l', rot);
	rotateEye('r', -rot);
	await genImg(i);
	}
	}

	document.getElementById('fileinput').addEventListener('input', (event) => {
	const reader = new FileReader();
	reader.addEventListener('load', (event) => {
	svg_container.innerHTML = atob(event.target.result.split(',')[1]);
	animate();
	});
	reader.readAsDataURL(event.target.files[0]);
	})
	</script>
	</body>

	</html>