Advertisement
okpalan

linethinning

Jun 13th, 2024 (edited)
382
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.52 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Line Thinning Algorithm</title>
  7. </head>
  8. <body>
  9.     <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
  10.     <script >
  11.         // Begin: Line Thinning Algorithm Zhang-Suen Thinning Algorithm
  12. const canvas = document.getElementById('myCanvas');
  13. const ctx = canvas.getContext('2d');
  14.  
  15. // Example: Draw a line
  16. ctx.beginPath();
  17. ctx.moveTo(50, 50);
  18. ctx.lineTo(450, 450);
  19. ctx.strokeStyle = 'black';
  20. ctx.lineWidth = 5;
  21. ctx.stroke();
  22.  
  23. // Get image data
  24. const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  25. const data = imageData.data;
  26.  
  27. function zhangSuenThinning(imageData, width, height) {
  28.     const black = 0;
  29.     const white = 255;
  30.     const getPixel = (x, y) => (imageData[(y * width + x) * 4] === black ? 1 : 0);
  31.     const setPixel = (x, y, value) => {
  32.         const index = (y * width + x) * 4;
  33.         imageData[index] = imageData[index + 1] = imageData[index + 2] = value;
  34.         imageData[index + 3] = 255; // Alpha channel
  35.     };
  36.  
  37.     let changing = true;
  38.     while (changing) {
  39.         changing = false;
  40.         let toWhite = [];
  41.  
  42.         // Step 1
  43.         for (let y = 1; y < height - 1; y++) {
  44.            for (let x = 1; x < width - 1; x++) {
  45.                const P2 = getPixel(x, y - 1), P3 = getPixel(x + 1, y - 1);
  46.                const P4 = getPixel(x + 1, y), P5 = getPixel(x + 1, y + 1);
  47.                const P6 = getPixel(x, y + 1), P7 = getPixel(x - 1, y + 1);
  48.                const P8 = getPixel(x - 1, y), P9 = getPixel(x - 1, y - 1);
  49.  
  50.                const A = (!P2 && P3) + (!P3 && P4) + (!P4 && P5) + (!P5 && P6) + (!P6 && P7) + (!P7 && P8) + (!P8 && P9) + (!P9 && P2);
  51.                const B = P2 + P3 + P4 + P5 + P6 + P7 + P8 + P9;
  52.  
  53.                if (
  54.                    getPixel(x, y) &&
  55.                    A === 1 &&
  56.                    B >= 2 && B <= 6 &&
  57.                    !((P2 && P4 && P6) || (P4 && P6 && P8))
  58.                ) {
  59.                    toWhite.push([x, y]);
  60.                     changing = true;
  61.                 }
  62.             }
  63.         }
  64.  
  65.         toWhite.forEach(([x, y]) => setPixel(x, y, white));
  66.         toWhite = [];
  67.  
  68.         // Step 2
  69.         for (let y = 1; y < height - 1; y++) {
  70.            for (let x = 1; x < width - 1; x++) {
  71.                const P2 = getPixel(x, y - 1), P3 = getPixel(x + 1, y - 1);
  72.                const P4 = getPixel(x + 1, y), P5 = getPixel(x + 1, y + 1);
  73.                const P6 = getPixel(x, y + 1), P7 = getPixel(x - 1, y + 1);
  74.                const P8 = getPixel(x - 1, y), P9 = getPixel(x - 1, y - 1);
  75.  
  76.                const A = (!P2 && P3) + (!P3 && P4) + (!P4 && P5) + (!P5 && P6) + (!P6 && P7) + (!P7 && P8) + (!P8 && P9) + (!P9 && P2);
  77.                const B = P2 + P3 + P4 + P5 + P6 + P7 + P8 + P9;
  78.  
  79.                if (
  80.                    getPixel(x, y) &&
  81.                    A === 1 &&
  82.                    B >= 2 && B <= 6 &&
  83.                    !((P2 && P4 && P8) || (P2 && P6 && P8))
  84.                ) {
  85.                    toWhite.push([x, y]);
  86.                     changing = true;
  87.                 }
  88.             }
  89.         }
  90.  
  91.         toWhite.forEach(([x, y]) => setPixel(x, y, white));
  92.     }
  93. }
  94.  
  95. // Apply thinning
  96. zhangSuenThinning(data, canvas.width, canvas.height);
  97. ctx.putImageData(imageData, 0, 0);
  98. // End: Line Thinning Algorithm Zhang-Suen Thinning Algorithm
  99.  
  100.     </script>
  101. </body>
  102. </html>
  103.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement