104 lines
No EOL
3.4 KiB
HTML
104 lines
No EOL
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Cards's Game</title>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="canvas" width="150" height="150"></canvas>
|
|
<div id="status"></div><br>
|
|
<div id="color" style="width:30px;height:30px;"></div>
|
|
<p>
|
|
---- POSITION and COLOR ----
|
|
</p>
|
|
|
|
|
|
<p>
|
|
{{X}}
|
|
</p>
|
|
|
|
|
|
<script>
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
function getElementPosition(obj) {
|
|
var curleft = 0, curtop = 0;
|
|
if (obj.offsetParent) {
|
|
do {
|
|
curleft += obj.offsetLeft;
|
|
curtop += obj.offsetTop;
|
|
} while (obj = obj.offsetParent);
|
|
return { x: curleft, y: curtop };
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function getEventLocation(element,event){
|
|
var pos = getElementPosition(element);
|
|
|
|
return {
|
|
x: (event.pageX - pos.x),
|
|
y: (event.pageY - pos.y)
|
|
};
|
|
}
|
|
|
|
function rgbToHex(r, g, b) {
|
|
if (r > 255 || g > 255 || b > 255)
|
|
throw "Invalid color component";
|
|
return ((r << 16) | (g << 8) | b).toString(16);
|
|
}
|
|
|
|
function drawImageFromWebUrl(sourceurl){
|
|
var img = new Image();
|
|
|
|
img.addEventListener("load", function () {
|
|
// The image can be drawn from any source
|
|
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
|
|
|
|
});
|
|
|
|
img.setAttribute("src", sourceurl);
|
|
}
|
|
// Draw a base64 image because this is a fiddle, and if we try with an image from URL we'll get tainted canvas error
|
|
// Read more about here : http://ourcodeworld.com/articles/read/182/the-canvas-has-been-tainted-by-cross-origin-data-and-tainted-canvases-may-not-be-exported
|
|
drawImageFromWebUrl("../static/images/test.jpg");
|
|
|
|
canvas.addEventListener("mousemove",function(e){
|
|
var eventLocation = getEventLocation(this,e);
|
|
var coord = "x=" + eventLocation.x + ", y=" + eventLocation.y;
|
|
|
|
// Get the data of the pixel according to the location generate by the getEventLocation function
|
|
var context = this.getContext('2d');
|
|
var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data;
|
|
|
|
// If transparency on the image
|
|
if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
|
|
coord += " (Transparent color detected, cannot be converted to HEX)";
|
|
}
|
|
|
|
var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
|
|
|
|
// Draw the color and coordinates.
|
|
document.getElementById("status").innerHTML = coord;
|
|
document.getElementById("color").style.backgroundColor = hex;
|
|
},false);
|
|
|
|
|
|
|
|
document.getElementById('logout').onclick = function logout() {
|
|
let token = localStorage.getItem('globalTime')
|
|
|
|
// use your favourite AJAX lib to send the token to the server as e.g. JSON
|
|
|
|
// redirect user to e.g. landing page of app if logout successul, show error otherwise
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |