projet-integrateur/IPreoject-CLientSide/templates/test.html
2022-01-16 18:14:15 +01:00

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>