commit
0eefc7a1d4
4 changed files with 141 additions and 0 deletions
Split View
Diff Options
+ 17
- 0
server.py
View File
| @@ -0,0 +1,17 @@ | |||
| # just for testing locally | |||
| import http.server | |||
| class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler): | |||
| def end_headers(self): | |||
| self.send_my_headers() | |||
| http.server.SimpleHTTPRequestHandler.end_headers(self) | |||
| def send_my_headers(self): | |||
| self.send_header("Cache-Control", "no-cache") | |||
| self.send_header("Pragma", "no-cache") | |||
| self.send_header("Expires", "0") | |||
| if __name__ == '__main__': | |||
| http.server.test(HandlerClass=MyHTTPRequestHandler) | |||
+ 11
- 0
xray.css
View File
| @@ -0,0 +1,11 @@ | |||
| canvas { | |||
| position: absolute; | |||
| } | |||
| img { | |||
| display: none; | |||
| } | |||
| #overlay { | |||
| z-index: 1; | |||
| } | |||
+ 20
- 0
xray.html
View File
| @@ -0,0 +1,20 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <title>X-ray Viewer</title> | |||
| <link rel="stylesheet" href="xray.css"> | |||
| <script src="xray.js"></script> | |||
| <meta name="theme-color" content="#000000" /> | |||
| <meta name="description" content="rip Flash lol" /> | |||
| <meta property="og:title" content="X-ray Viewer" /> | |||
| <meta property="og:description" content="rip Flash lol" /> | |||
| </head> | |||
| <body> | |||
| <canvas id="overlay"></canvas> | |||
| <canvas id="base"></canvas> | |||
| <img id="overlay-img" src="overlay.png"> | |||
| <img id="base-img" src="base.png"> | |||
| </body> | |||
+ 93
- 0
xray.js
View File
| @@ -0,0 +1,93 @@ | |||
| let overlayLoaded = false; | |||
| let baseLoaded = false; | |||
| let radius = 200; | |||
| document.addEventListener("DOMContentLoaded", e => { | |||
| const overlayImg = document.querySelector("#overlay-img"); | |||
| const baseImg = document.querySelector("#base-img"); | |||
| overlayImg.addEventListener("load", e => { | |||
| console.log("The overlay is loaded"); | |||
| overlayLoaded = true; | |||
| if (overlayLoaded && baseLoaded) { | |||
| setup(); | |||
| } | |||
| }) | |||
| baseImg.addEventListener("load", e => { | |||
| console.log("The base is loaded"); | |||
| baseLoaded = true; | |||
| if (overlayLoaded && baseLoaded) { | |||
| setup(); | |||
| } | |||
| }) | |||
| }); | |||
| function setup() { | |||
| const overlay = document.querySelector("#overlay"); | |||
| const base = document.querySelector("#base"); | |||
| const overlayImg = document.querySelector("#overlay-img"); | |||
| const baseImg = document.querySelector("#base-img"); | |||
| /** @type {CanvasRenderingContext2D} */ | |||
| const overlayCtx = overlay.getContext("2d"); | |||
| /** @type {CanvasRenderingContext2D} */ | |||
| const baseCtx = base.getContext("2d"); | |||
| baseCtx.canvas.width = baseImg.width; | |||
| baseCtx.canvas.height = baseImg.height; | |||
| baseCtx.drawImage(baseImg, 0, 0); | |||
| overlayCtx.canvas.width = overlayImg.width; | |||
| overlayCtx.canvas.height = overlayImg.height; | |||
| overlayCtx.drawImage(overlayImg, 0, 0); | |||
| overlay.addEventListener("mousemove", e => { | |||
| let x = e.clientX - e.target.getBoundingClientRect().x; | |||
| let y = e.clientY - e.target.getBoundingClientRect().y; | |||
| updateOverlay(x, y); | |||
| }); | |||
| console.log("Done"); | |||
| } | |||
| function updateOverlay(x, y) { | |||
| console.log("MOVE") | |||
| /** @type {CanvasRenderingContext2D} */ | |||
| const overlayCtx = overlay.getContext("2d"); | |||
| const overlayImg = document.querySelector("#overlay-img"); | |||
| const w = overlayCtx.canvas.width; | |||
| const h = overlayCtx.canvas.height; | |||
| overlayCtx.save(); | |||
| overlayCtx.globalCompositeOperation = "source-over"; | |||
| overlayCtx.clearRect(0, 0, w, h); | |||
| overlayCtx.beginPath(); | |||
| overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI); | |||
| const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius); | |||
| gradient.addColorStop(0.75, '#000000FF'); | |||
| gradient.addColorStop(1, '#00000000'); | |||
| overlayCtx.fillStyle = gradient; | |||
| overlayCtx.fill(); | |||
| overlayCtx.globalCompositeOperation = "source-in"; | |||
| overlayCtx.drawImage(overlayImg, 0, 0); | |||
| overlayCtx.restore(); | |||
| } | |||