akrennmair/jpeg-fp.html

## jpeg-fp.html
<!DOCTYPE html>
<html>
    <head>
        <title>jpeg fingerprinting</title>
    </head>
    <body>
        <h1>JPEG Fingerprinting</h1>
        <p>
            Fingerprint: <tt id="fingerprint"></tt>
        </p>
    </body>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const hash = function(str) {
                let hash = 0;
                for (let i = 0; i < str.length; i++) {
                    const char = str.charCodeAt(i);
                    hash = (hash << 5) - hash + char;
                    hash &= hash;
                }
                return new Uint32Array([hash])[0].toString(16);
            };

            const img = new Image();
            img.src = "data:image/jpeg;base64,/9j/4QDKRXhpZgAATU0AKgAAAAgABgESAAMAAAABAAEAAAEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAeQAAAHAAAABDAyMjGRAQAHAAAABAECAwCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAAE6gAwAEAAAAAQAAAE6kBgADAAAAAQAAAAAAAAAAAAD/2wCEABwcHBwcHDAcHDBEMDAwRFxEREREXHRcXFxcXHSMdHR0dHR0jIyMjIyMjIyoqKioqKjExMTExNzc3Nzc3Nzc3NwBIiQkODQ4YDQ0YOacgJzm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5v/dAAQABf/AABEIAE4ATgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AL1FNdtgHHU4pwORnGK2MbBRRULXEaP5ZzmmBNVOQFZGA7/NUpuIgcVDesYwkq/SolsVHRlpGDA+1PqlC+wBugbireN3Rjwe1OOwS3HUUxtqfMSRkVHbuHQYOTjmqJP/0LchULtPXqBUc0vkwll65wKpSyoZPkHt9RVhx5tqMdgD+VNy10JS0sTxzxyLu+gNZdwcTsAfpQrGNWQY5H51WOQaHK6BIkJPJI7VLPMJIwO3T6kVCNrHn04pChcYLdOMAUkxmrAqNBtwOlV45fIJV3zj0otGK5QjIApkgAJcAAnkZNF7bBYkdgcnrnj5u1VYmKnaCEGO9S/Iy7o85XqM9qEjXovLVKkFj//Ror8x+lXLUyODGGwo9uxqieoJ/Crto+JSD/GKhAiExspKn+Gq7pg/MP8ACrd4u2bdjIIzUAY7Dnp7dqWwEIQqRLgEDkAelNYMxXZxnpSndFIYz0/SnbRIg29uQTVCJ7I9WJ96mmLbVIHQ449KihTywqdyKmZTtZV/yabGivvYruPAJ9MnFMlLLtAO3j6U3fsXso7HvQpjl4lP0PtU2Ef/0qMaYj+bj3qaMhJFPTaeR3qqs+WP91RUiSGVcCswNC9TKqwx/npVFn3ZBOOB2rRZfOteBnjOPcVkiN2ww45/DHpTBjZApGX6HoB6imgbmUYwOOP60MqFuFPB7dMUQuxB9uh+v/1qYiyXzyfvAbhj61cDBjx3+as9GRT5ZPRDVu3zsx0wOPp2/SmOJRnhXzGyccZFIjIw2yY49elXZguQ2Ky2Xacjj0FIGf/TpO8e7Yn8X/6qaVKpsIHP3QPaojyDJgfLgfhT5Dglh2I4qBGnYSb42T+6azZFjjdkY42mrll/rt/QOvT6VFqICS8/xLx9RTH0KJYSE7cjApmdiqvXPOPbtSDIx6nFDczbewIX+lMRckT9+rjAH3f0p9s2GA68D9KjiVj+8B/ixj2zTgnllSvbrSGizIwK56bT+GDxVJoo34b5SvBxV3aGYp2YYqg7eWd5/iHQe3FA5H//2Q==";
            img.style = 'display: none';
            document.body.appendChild(img);

            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.style = 'display: none';

            document.body.appendChild(canvas);

            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            const canvasData = canvas.toDataURL();
            const hashedValue = hash(canvasData);

            document.getElementById('fingerprint').textContent = hashedValue;
        });
    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jpeg fingerprinting</title>
	</head>
	<body>
	<h1>JPEG Fingerprinting</h1>
	<p>
	Fingerprint: <tt id="fingerprint"></tt>
	</p>
	</body>
	<script>
	document.addEventListener("DOMContentLoaded", () => {
	const hash = function(str) {
	let hash = 0;
	for (let i = 0; i < str.length; i++) {
	const char = str.charCodeAt(i);
	hash = (hash << 5) - hash + char;
	hash &= hash;
	}
	return new Uint32Array([hash])[0].toString(16);
	};

	const img = new Image();
	img.src = "data:image/jpeg;base64,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";
	img.style = 'display: none';
	document.body.appendChild(img);

	const canvas = document.createElement('canvas');
	canvas.width = img.width;
	canvas.height = img.height;
	canvas.style = 'display: none';

	document.body.appendChild(canvas);

	const ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0);

	const canvasData = canvas.toDataURL();
	const hashedValue = hash(canvasData);

	document.getElementById('fingerprint').textContent = hashedValue;
	});
	</script>
	</html>