2022-04-04 10:40:00 +02:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<!-- Display image, show mouse position and pixel values
|
|
|
|
|
Author: Dominik Roth
|
|
|
|
|
But I stole most of it from this guy:
|
|
|
|
|
Author: Changjiang Yang
|
|
|
|
|
Date: 08/14/2016
|
|
|
|
|
TODO: Add drag and drop
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
div.footer {
|
|
|
|
|
left: 0;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: #0072BB;
|
|
|
|
|
color:#fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
image-rendering: -moz-crisp-edges;
|
|
|
|
|
image-rendering: -webkit-crisp-edges;
|
|
|
|
|
image-rendering: pixelated;
|
|
|
|
|
image-rendering: crisp-edges;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="footer" id="results">Move mouse over image to show coordinates on r/place</div>
|
|
|
|
|
<canvas id="canvas" style="margin:12px;"></canvas>
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<a href='#' onclick='drawGrid()'>Activate Grid</a>
|
|
|
|
|
<a href='#' onclick='drawImg()'>Deactivate Grid</a>
|
|
|
|
|
|
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
|
|
<a href='koeri.html'>New [koeri]</a><br><br>
|
|
|
|
|
|
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
|
|
<a href='https://drbaka-de.github.io/rplace/'>drbaka_de made a fancier version of this page</a><br><br>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
Color Guide:<br>
|
|
|
|
|
|
|
|
|
|
<img height='400px;' src='KIT_r_Place_Color_guide.png'>
|
|
|
|
|
|
|
|
|
|
<hr><br>
|
|
|
|
|
|
|
|
|
|
<a href='https://www.reddit.com/r/place/?cx=802&cy=534&px=53' target='_blank'>Link zu r/place</a><br><br>
|
|
|
|
|
|
2022-04-04 10:43:48 +02:00
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<h5>Source Code can be found <a href='https://gitea.dominik.roth.ml/dodox/kitplace'>here</a></h5>
|
2022-04-04 10:40:00 +02:00
|
|
|
|
2022-04-04 10:43:48 +02:00
|
|
|
<script>
|
2022-04-04 10:40:00 +02:00
|
|
|
var URL = window.URL;
|
|
|
|
|
var cvs = document.getElementById('canvas');
|
|
|
|
|
var ctx = cvs.getContext('2d');
|
|
|
|
|
var res = document.getElementById('results');
|
|
|
|
|
|
|
|
|
|
cvs.addEventListener('mousemove', mousePos, false);
|
|
|
|
|
|
|
|
|
|
function drawGrid() {
|
|
|
|
|
var cvs = document.getElementById('canvas');
|
|
|
|
|
var ctx = cvs.getContext('2d');
|
|
|
|
|
for (let i = 0; i <= cvs.width; i+=10){
|
|
|
|
|
ctx.beginPath(); // Start a new path
|
|
|
|
|
ctx.moveTo(i, 0); // Move the pen to (30, 50)
|
|
|
|
|
ctx.lineTo(i, cvs.height); // Draw a line to (150, 100)
|
|
|
|
|
ctx.stroke(); // Render the path
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i <= cvs.height; i+=10){
|
|
|
|
|
ctx.beginPath(); // Start a new path
|
|
|
|
|
ctx.moveTo(0, i); // Move the pen to (30, 50)
|
|
|
|
|
ctx.lineTo(cvs.width, i); // Draw a line to (150, 100)
|
|
|
|
|
ctx.stroke(); // Render the path
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function mousePos(evt) {
|
|
|
|
|
var rect = cvs.getBoundingClientRect();
|
|
|
|
|
var x = parseInt((evt.clientX - rect.left)/10) + 760;
|
|
|
|
|
var y = parseInt((evt.clientY - rect.top)/10) + 547 - 26;
|
|
|
|
|
var p = ctx.getImageData(x, y, 1, 1).data;
|
|
|
|
|
results.innerHTML = '<table style="width:100%;table-layout:fixed"><td>X: '
|
|
|
|
|
+ x + '</td><td>Y: ' + y + '</td></table>';
|
|
|
|
|
return {x, y};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawImg() {
|
|
|
|
|
var img = new Image();
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
cvs.width = img.width*10;
|
|
|
|
|
cvs.height = img.height*10;
|
|
|
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
|
|
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
|
|
|
|
|
}
|
2022-04-04 10:59:08 +02:00
|
|
|
img.src = "data:image/png;base64,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
|
2022-04-04 10:40:00 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
drawImg();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
