76 lines
36 KiB
HTML
76 lines
36 KiB
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
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><br>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<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)/8) + 866;
|
||
|
|
var y = parseInt((evt.clientY - rect.top)/8) + 199;
|
||
|
|
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;
|
||
|
|
cvs.height = img.height;
|
||
|
|
ctx.imageSmoothingEnabled = false;
|
||
|
|
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
|
||
|
|
}
|
||
|
|
img.src = "data:image/png;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
drawImg();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|