90 lines
1.2 MiB
HTML
90 lines
1.2 MiB
HTML
|
<!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;
|
||
|
|
}
|
||
|
|
</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='tichy_grid.html'>Activate Grid</a>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<a href='index.html'>Original KIT Logo</a>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<h3>The Template shown here might become oudated. The Discord-Channel always contains the newest information on the current plan.</h3>
|
||
|
|
<h4>Current Imgur-Link: <a href='https://i.imgur.com/04s98N5.png'>https://i.imgur.com/04s98N5.png</a></h4>
|
||
|
|
<h4>Previous Imgur-Link: <a href='https://i.imgur.com/fyE1WmW.png'>https://i.imgur.com/fyE1WmW.png</a></h4>
|
||
|
|
-->
|
||
|
|
<script>
|
||
|
|
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 mousePos(evt) {
|
||
|
|
var rect = cvs.getBoundingClientRect();
|
||
|
|
var x = parseInt((evt.clientX - rect.left)/10) + 1102;
|
||
|
|
var y = parseInt((evt.clientY - rect.top)/10) + 511;
|
||
|
|
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 drawGrid(ctx) {
|
||
|
|
for (let i = 0; i<= 64*10; i+=10){
|
||
|
|
ctx.beginPath(); // Start a new path
|
||
|
|
ctx.moveTo(i, 0); // Move the pen to (30, 50)
|
||
|
|
ctx.lineTo(i, 64*10); // Draw a line to (150, 100)
|
||
|
|
ctx.stroke(); // Render the path
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = 0; i<= 64*10; i+=10){
|
||
|
|
ctx.beginPath(); // Start a new path
|
||
|
|
ctx.moveTo(0, i); // Move the pen to (30, 50)
|
||
|
|
ctx.lineTo(64*10, i); // Draw a line to (150, 100)
|
||
|
|
ctx.stroke(); // Render the path
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function handleImageFile() {
|
||
|
|
var img = new Image();
|
||
|
|
img.onload = function() {
|
||
|
|
cvs.width = img.width;
|
||
|
|
cvs.height = img.height;
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
}
|
||
|
|
// This is how pros do version-management:
|
||
|
|
img.src = " data:image/png;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
handleImageFile();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|