Advertisement
Guest User

Blub

a guest
May 4th, 2019
247
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.15 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <style>
  7.             #bgr {
  8.                 position: absolute;
  9.                 left: 10px;
  10.                 top: 10px;
  11.             }
  12.            
  13.             #msk0, #msk1 {
  14.                 position: absolute;
  15.                 left: 10px;
  16.                 top: 10px;
  17.             }
  18.            
  19.             .visible {
  20.                 opacity: 0.5;
  21.                 mix-blend-mode: multiply;
  22.                 transition: opacity .5s ease-in-out;
  23.             }
  24.            
  25.             .invisible {
  26.                 opacity: 0.0;
  27.                 transition: opacity .5s ease-in-out;
  28.             }
  29.         </style>
  30.     </head>
  31.  
  32.     <body>
  33.        
  34.         <img id= "bgr" onmousemove="trackMouse(event)" src="img.jpg"/>
  35.         <img id="msk0" onmousemove="trackMouse(event)" class="invisible"/>
  36.         <img id="msk1" onmousemove="trackMouse(event)" class="invisible"/>
  37.        
  38.         <script>
  39.             lastMask = -1;
  40.             curMaskImg = 0;
  41.             function trackMouse(e) {
  42.                 var maskAtMouse = -1;
  43.                 for (var i = 0; i < masks.length; i++) {
  44.                     var m = masks[i];
  45.                     if (pointInsideBox(e.clientX, e.clientY, m.bbox)) {
  46.                         var pixel = getMaskPixel(m, e.clientX, e.clientY);
  47.                         if (pixel[0] === 255) {
  48.                             maskAtMouse = i;
  49.                             break;
  50.                         }
  51.                     }
  52.                 }
  53.                 if (maskAtMouse != -1 && lastMask != maskAtMouse) {
  54.                     lastMask = maskAtMouse;
  55.  
  56.                     document.getElementById("msk" + curMaskImg).classList = "invisible";
  57.                     curMaskImg = (curMaskImg + 1) % 2;
  58.                    
  59.                     document.getElementById("msk" + curMaskImg).src = masks[maskAtMouse].dataUrl;
  60.                     document.getElementById("msk" + curMaskImg).classList = "visible";
  61.                 }
  62.                 if (maskAtMouse == -1 && lastMask != -1) {
  63.                     lastMask = -1;
  64.                     document.getElementById("msk0").classList = "invisible";
  65.                     document.getElementById("msk1").classList = "invisible";
  66.                 }
  67.             }
  68.  
  69.             function getMaskPixel(mask, x, y) {
  70.                 return mask.getContext("2d").getImageData(x, y, 1, 1).data;
  71.             }
  72.  
  73.             function determineBoundingBox(mask) {
  74.                 var ctx = mask.getContext("2d");
  75.                 var imgData = ctx.getImageData(0, 0, mask.width, mask.height);
  76.                
  77.                 var minX = mask.width;
  78.                 var maxX = -1;
  79.                 var minY = mask.height;
  80.                 var maxY = -1;
  81.                
  82.                 var idx = 0;
  83.                 for (var y = 0; y < mask.height; y++) {
  84.                     for (var x = 0; x < mask.width; x++) {
  85.                         if (imgData.data[idx] == 255) {
  86.                             minX = x < minX ? x : minX;
  87.                             minY = y < minY ? y : minY;
  88.                             maxX = x > maxX ? x : maxX;
  89.                             maxY = y > maxY ? y : maxY;
  90.                         }
  91.                         idx += 4;
  92.                     }
  93.                 }
  94.                 ctx.putImageData(imgData, 0, 0);
  95.                
  96.                 return {"x1": minX, "y1": minY, "x2": maxX, "y2": maxY};
  97.             }
  98.  
  99.             function pointInsideBox(x, y, bbox) {
  100.                 return !(x < bbox.x1 || x > bbox.x2 || y < bbox.y1 || y > bbox.y2);
  101.             }
  102.  
  103.             function preProcessMasks(i) {
  104.                 var tmpImg = new Image;
  105.  
  106.                 tmpImg.onload = () => {
  107.                     var mask = document.createElement("canvas");
  108.                     mask.width = tmpImg.width;
  109.                     mask.height = tmpImg.height;
  110.                     mask.getContext("2d").drawImage(tmpImg, 0, 0, tmpImg.width, tmpImg.height);
  111.                     mask.bbox = determineBoundingBox(mask);
  112.                     mask.dataUrl = mask.toDataURL("image/png");
  113.                     masks.push(mask);
  114.                 }
  115.                
  116.                 tmpImg.src = "./" + i + ".jpg";
  117.             }
  118.        
  119.         </script>
  120.        
  121.         <script>           
  122.             var masks = [];
  123.             for (var i=1; i <= 5; ++i)
  124.                 preProcessMasks(i);
  125.         </script>
  126.     </body>
  127. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement