API tools faq
paste
baptx

HTML5 canvas vertical image transition and magical magnifying glass (DeepNude compatible)

baptx
Nov 14th, 2022 (edited)
1,854
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.05 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title>HTML5 canvas vertical image transition and magical magnifying glass with persistent feature</title>
  4.     </head>
  5.     <body>
  6.         <canvas id="myCanvas" width="512" height="512"></canvas>
  7.         <style>
  8.             canvas {
  9.                 display: block;
  10.                 margin-left: auto;
  11.                 margin-right: auto;
  12.                 /* drawing magnifying glass on canvas since CSS3 cursor does not have a bigger size to match viewing result when zooming on web page */
  13.                 cursor: none;
  14.             }
  15.         </style>
  16.         <script>
  17.             /*
  18.             Code based on https://slicker.me/javascript/image_transition_effect.htm
  19.             A fun test can be made with images from https://github.com/zhengyima/DeepNude_NoWatermark_withModel or https://github.com/stacklikemind/deepnude_official
  20.             Server needed because we save drawing of local files when using persistent magnifying glass on mouse up: https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported
  21.             Get magnifying glass cursor (80x50 pixels view and 5 pixels border) with this Linux command:
  22.             echo "iVBORw0KGgoAAAANSUhEUgAAAHsAAABTCAYAAAC/OHgkAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9
  23. kT1Iw0AcxV9TpaKVDu0g4pChOlkUFXHUKhShQqgVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg
  24. +AHi6OSk6CIl/i8ptIj14Lgf7+497t4BQr3MNKtrHNB020wl4mImuyoGXtGHEMKIYUxmljEnSUl0
  25. HF/38PH1LsazOp/7c/SrOYsBPpF4lhmmTbxBPL1pG5z3iSOsKKvE58SjJl2Q+JHrisdvnAsuCzwz
  26. YqZT88QRYrHQxkobs6KpEU8RR1VNp3wh47HKeYuzVq6y5j35C4M5fWWZ6zSHkMAiliBBhIIqSijD
  27. pr5K0EmxkKL9eAf/oOuXyKWQqwRGjgVUoEF2/eB/8LtbKz854SUF40D3i+N8DAOBXaBRc5zvY8dp
  28. nAD+Z+BKb/krdWDmk/RaS4seAaFt4OK6pSl7wOUOMPBkyKbsSn6aQj4PvJ/RN2WB8C3Qu+b11tzH
  29. 6QOQpq6SN8DBITBSoOz1Du/uae/t3zPN/n4AxWpyyLh2Xo8AAAAGYktHRAD/AP8A/6C9p5MAAAAJ
  30. cEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmCw8TLTg1MowgAAAAGXRFWHRDb21tZW50AENyZWF0
  31. ZWQgd2l0aCBHSU1QV4EOFwAAAOJJREFUeNrt3ckNwzAQBMGl4fxTpnPwgzq6OgJBhRHIl9bM7NGJ
  32. 1tUP8GHQCTZswdaj+971MPHwtmULtmALtmALtmDDFmzBFmzBFmzBFmzBFmzBhi3Ygi3Ygi3Ygi3Y
  33. gi3Ygg1bsAVbsAVbsAVbsAVbsAVbsGELtmALtmALtmALtv5qjV89nX7fsKH7jL+1bdlWbtlW/oID
  34. A8CzFrDvt9gF28phWzlsK4fdXjnsEDjsEDrsEDjsEDrsEDjs0BUNdmjlsEMrhx1aOezQymGHVg47
  35. BA47hA47BA47hA47BA47hP4DpbAehj+p6uEAAAAASUVORK5CYII=" | base64 -d > magnifying_glass.png
  36.             */
  37.            
  38.             // https://www.quora.com/Is-%E2%80%98let%E2%80%99-or-%E2%80%98var%E2%80%99-more-appropriate-for-declaring-variables-in-JavaScript/answer/Glenn-Anderson?ch=10&oid=146277096&share=3e76ca68&target_type=answer
  39.             var imageInit = new Image();
  40.             imageInit.src = "input.png";
  41.  
  42.             var image = new Image();
  43.             image.src = "output.png";
  44.             var canvas = document.getElementById("myCanvas");
  45.             var context = canvas.getContext("2d");
  46.             var row, imageWidth, imageHeight;
  47.            
  48.             var magnifyingGlass = new Image();
  49.             magnifyingGlass.src = "magnifying_glass.png";
  50.            
  51.             context.drawImage(imageInit, 0, 0);
  52.              
  53.             image.onload = function() {
  54.               imageWidth = image.width;
  55.               imageHeight = image.height;
  56.               row = 0;
  57.             };
  58.            
  59.             var img;
  60.             var animation;
  61.             var animationFinished = true;
  62.             var backwards = false;
  63.            
  64.             document.addEventListener("keypress", function() {
  65.                 //console.log(row);
  66.                 animationFinished = false;
  67.                 cancelAnimationFrame(animation);
  68.                     if (!backwards) {
  69.                         img = image;
  70.                         animate();
  71.                         backwards = true;
  72.                     }
  73.                     else {
  74.                         img = imageInit;
  75.                         animateBackwards();
  76.                         backwards = false;
  77.                     }
  78.             });
  79.            
  80.             var drawing = false;
  81.             var imgBak = new Image();
  82.             imgBak.src = imageInit.src;
  83.            
  84.             canvas.addEventListener("mousedown", function(e) {
  85.                 drawing = true;
  86.             });
  87.            
  88.             canvas.addEventListener("mouseup", function(e) {
  89.                 drawing = false;
  90.             });
  91.            
  92.             canvas.addEventListener("mousemove", function(e) {
  93.                 if (animationFinished) {
  94.                     if (!drawing) {
  95.                         // https://stackoverflow.com/questions/10403214/html5-canvas-mouse-coordinates/10403520#10403520
  96.                         var rect = canvas.getBoundingClientRect();
  97.                         var x = e.clientX - rect.left;
  98.                         var y = e.clientY;
  99.                         //console.log(x, y);
  100.                         context.drawImage(imgBak, 0, 0);
  101.                         context.drawImage(image, x - 80, y - 50, 80, 50, x - 80, y - 50, 80, 50);
  102.                         context.drawImage(magnifyingGlass, x - 85, y - 55);
  103.                     }
  104.                     else {
  105.                         var rect = canvas.getBoundingClientRect();
  106.                         var x = e.clientX - rect.left;
  107.                         var y = e.clientY;
  108.                         context.drawImage(imgBak, 0, 0);
  109.                         context.drawImage(image, x - 80, y - 50, 80, 50, x - 80, y - 50, 80, 50);
  110.                         imgBak.src = canvas.toDataURL();
  111.                         context.drawImage(magnifyingGlass, x - 85, y - 55);
  112.                     }
  113.                 }
  114.             });
  115.  
  116.             function animate() {
  117.               context.drawImage(img, 0, row, imageWidth, row, 0, row, imageWidth, row);
  118.               if (row < imageHeight) {
  119.                   ++row;
  120.                   animation = requestAnimationFrame(animate);
  121.               }
  122.               else {
  123.                   imgBak.src = image.src;
  124.                   animationFinished = true;
  125.               }
  126.             }
  127.            
  128.             function animateBackwards() {
  129.               context.drawImage(img, 0, row, imageWidth, row, 0, row, imageWidth, row);
  130.               if (row > 0) {
  131.                   --row;
  132.                   animation = requestAnimationFrame(animateBackwards);
  133.               }
  134.               else {
  135.                   imgBak.src = imageInit.src;
  136.                   animationFinished = true;
  137.               }
  138.             }
  139.         </script>
  140.     </body>
  141. </html>
  142.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!