oliverthered

imagemanip.js

Nov 16th, 2020
5
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var processor = Object();
  2.  
  3. processor.doLoad = function doLoad() {
  4.     this.sourceimage = document.getElementById('myimage');
  5.     this.canvas1 = document.getElementById('canvas1');
  6.     this.ctx1 = this.canvas1.getContext('2d');
  7.     this.ctx1.drawImage(this.sourceimage, 0 ,0);
  8.     this.sourceimageCtx = this.ctx1;
  9.     this.canvas2 = document.getElementById('canvas2');
  10.     this.ctx2 = this.canvas2.getContext('2d');
  11.     let self = this;
  12.  
  13.  
  14.  
  15.  
  16.  
  17. let frame = this.sourceimageCtx.getImageData(0, 0, this.canvas1.width, this.canvas1.height);//this.ctx1.getImageData(0, 0, this.width, this.height);
  18. let width = this.canvas1.width;
  19. frame.width = this.canvas1.width;
  20. let height = this.canvas1.height;
  21. let l = frame.data.length / 4;
  22. let R = 0;
  23. let G = 1;
  24. let B = 2;
  25. let A = 3;
  26.  
  27. //Filter the source image to remove all the non-text taht we are not interested in.
  28. for (let i = 0; i < l; i++) {
  29.     let r = frame.data[i * 4 + 0];
  30.     let g = frame.data[i * 4 + 1];
  31.     let b = frame.data[i * 4 + 2];
  32.     let alpha = frame.data[i * 4 + 3];
  33.     x = i % width;
  34.     y = (i - x) / width;
  35.     if (r > 22 && r <= 24 && g > 20 && g <= 22 && b > 20 && b <= 25) {
  36.        
  37.         r = 0;
  38.         g = 0;
  39.         b = 0;
  40.         alpha = 255;
  41.  
  42.     } else {
  43.         r = 255;
  44.         g = 255;
  45.         b = 255;
  46.         alpha = 255;
  47.     }
  48.         frame.data[i * 4 + R] = r;
  49.         frame.data[i * 4 + G] = g;
  50.         frame.data[i * 4 + B] = b;
  51.         frame.data[i * 4 + A] = alpha;
  52. }
  53.     this.sourceimageCtx.putImageData(frame, 0, 0);
  54.  
  55.     tollerance = 32; //This is the cut off tollarance for the number of non-empty cells
  56.                      //on a row or column for the row or column to be flagged as significant. the higher the value the tighter the fit has to be.
  57.                      //It may be a good idea to start out quite high and see what matches then drop it down too see if there's a broader fit.
  58.    
  59.     // Scan the image with a grid matrix of ever decreasing box width. Ech itteration there are twice as many element in the matrix.
  60.     theGrids = [];
  61.     theGrids.length = 40;
  62.     theColRowTotals = [];
  63.     theColRowTotals.length = 40;
  64.     grid = 0;
  65.     for(gridSpacing = 2;
  66.         gridSpacing <= 512;
  67.         gridSpacing = gridSpacing * 2)      
  68.     {
  69.         theGrids[grid] = [];        
  70.         theGrids[grid].length = gridSpacing * gridSpacing;        
  71.         theColRowTotals[grid] = Object();
  72.         theColRowTotals[grid].colTotals = [];
  73.         theColRowTotals[grid].colTotals.length = gridSpacing;
  74.         theColRowTotals[grid].rowTotals = [];
  75.         theColRowTotals[grid].rowTotals.length = gridSpacing;
  76.         let theGrid = theGrids[grid];
  77.         py=0;
  78.         for(gy = 0; gy < height; gy = gy + (height/ gridSpacing))
  79.         {
  80.             px=0;
  81.             igy = Math.floor(gy);
  82.             iww = Math.floor(height/ gridSpacing);
  83.             for(gx = 0; gx < width; gx = gx + (width/ gridSpacing))
  84.             {
  85.                
  86.                 igx = Math.floor(gx);
  87.                 iwh = Math.floor(width/ gridSpacing);
  88.  
  89.                 //Test to see if there is anything inside the matrix element
  90.  
  91.                 hasSpot = 0;
  92.                 if(grid > 0)
  93.                 {
  94.                     // If the matrix element contained nothing on the pervious run then dopn't bother checking it again this time  
  95.                     if(theGrids[grid - 1][Math.floor(px/2) + Math.floor(py/2) * gridSpacing /2])
  96.                         hasSpot = testSquare(frame, igx,  igy,  iwh,  iww)
  97.                 } else {
  98.                     hasSpot = testSquare(frame, igx,  igy,  iwh,  iww)
  99.                 }
  100.                 theGrid[px + py * gridSpacing] = hasSpot;
  101.                
  102.                 //Draw a little dot on the frame image so we know we have done something
  103.                 if(hasSpot == 1)
  104.                 {
  105.                     frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) + (igy +Math.floor((height/ gridSpacing)/ 2))  * frame.width) * 4 + R] = 255;
  106.                     frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + G] = 0;
  107.                     frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + B] = 0;
  108.                     frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + A] = 255;
  109.                 }
  110.                 px++;
  111.             }
  112.             py++;
  113.         }
  114.         //Now that we've identified all the matrix cells that contain something in this itteration
  115.         //Count how many cellsd contained sopmething bhy each row and column
  116.         for(col = 0; col < gridSpacing; col++)
  117.         {
  118.             if(grid > 0 && col % 2 === 0)
  119.             {
  120.                 // The overlapping column on the previous grid was below the threashold, so set this one not to double count
  121.                 if(theColRowTotals[grid - 1].colTotals[col / 2] <  Math.floor(gridSpacing / tollerance) || theColRowTotals[grid - 1].colTotals[col / 2]=== 9999999999)
  122.                 {
  123.                     theColRowTotals[grid].colTotals[col] = 9999999999;
  124.                     col++;
  125.                     theColRowTotals[grid].colTotals[col] = 9999999999;
  126.                     continue;
  127.                 }
  128.             }
  129.             colTotal = 0;
  130.             for(row = 0; row < gridSpacing; row ++)
  131.                 colTotal += theGrid[row + col * gridSpacing]
  132.             theColRowTotals[grid].colTotals[col] = colTotal;
  133.         }
  134.  
  135.         for(row = 0; row < gridSpacing; row++)
  136.         {
  137.             if(grid > 0 && row % 2 === 0)
  138.             {
  139.                 // The overlapping row on the previous grid was below the threashold, so set this one not to double count
  140.                 if(theColRowTotals[grid - 1].rowTotals[row / 2] < Math.floor(gridSpacing / tollerance) || theColRowTotals[grid - 1].rowTotals[row / 2]=== 9999999999)
  141.                 {
  142.                     theColRowTotals[grid].rowTotals[row] = 9999999999;
  143.                     row++;
  144.                     theColRowTotals[grid].rowTotals[row] = 9999999999;
  145.                     continue;
  146.                 }
  147.             }
  148.             rowTotal = 0;
  149.             for(col = 0; col < gridSpacing; col ++)
  150.                 rowTotal += theGrid[row + col * gridSpacing]
  151.             theColRowTotals[grid].rowTotals[row] = rowTotal;
  152.         }
  153.         //move ontio the next grid (we could bail out if we've had enough rows/cols within tollerance )
  154.         grid = grid + 1;
  155.     }
  156.    
  157.     grids = grid;
  158.     matchedRowCols = [];
  159.     //finally, itterate over all the row col totals and identify those that are within tollarance and add them tyo a list of candidate row and columns for layout fitting
  160.     //In theory it's possible to check the row and column couints against the tollarance and add them to the list when they are calculated
  161.     //Then if we get enough entries early we can bail out of the grid matrix test early
  162.     //That would also mean there's no need to go over them here.. I may fix this bug.
  163.     for(grid = 0; grid < grids; grid++)
  164.     {
  165.         let theColRowTotal = theColRowTotals[grid];
  166.         colRowFitcount = 0;
  167.         entries = theColRowTotal.rowTotals.length;
  168.         for(entry = 0; entry < entries; entry++)
  169.         {
  170.             if(theColRowTotal.colTotals[entry] < Math.floor(entries / tollerance))
  171.             {
  172.                 matchedRowCols.length = matchedRowCols.length + 1;
  173.                 matchedRowCols[matchedRowCols.length - 1] = Object();
  174.                 let matchedRowCol = matchedRowCols[matchedRowCols.length - 1];
  175.                 matchedRowCol.grid = grid;
  176.                 matchedRowCol.entry = entry;
  177.                 matchedRowCol.rowcol = "col";
  178.                 matchedRowCol.count = theColRowTotal.colTotals[entry];
  179.                 matchedRowCol.entries = entries;
  180.                 matchedRowCols[matchedRowCols.length - 1] = matchedRowCol;
  181.             }
  182.             if(theColRowTotal.rowTotals[entry] < Math.floor(entries / tollerance))
  183.             {
  184.                 matchedRowCols.length = matchedRowCols.length + 1;
  185.                 matchedRowCols[matchedRowCols.length - 1] = Object();
  186.                 let matchedRowCol = matchedRowCols[matchedRowCols.length - 1];
  187.                 matchedRowCol.grid = grid;
  188.                 matchedRowCol.entry = entry;
  189.                 matchedRowCol.rowcol = "row";
  190.                 matchedRowCol.count = theColRowTotal.rowTotals[entry];
  191.                 matchedRowCol.entries = entries;
  192.                 matchedRowCols[matchedRowCols.length - 1] = matchedRowCol;                
  193.             }
  194.         }
  195.         if(matchedRowCols.length > 40)
  196.         {
  197.             break;
  198.         }
  199.     }
  200.  
  201.     this.ctx2.putImageData(frame, 0, 0);
  202. };
  203.  
  204. function testSquare(frame, left, top, width, height)
  205. {
  206.     let R = 0;
  207.     let G = 1;
  208.     let B = 2;
  209.     let A = 3;
  210.     for(x =0;x<width;x++){
  211.         for(y = 0; y<height;y++)
  212.         {
  213.             if(getPixel(left + x, top + y, frame)[R] === 0)
  214.                 return 1;
  215.         }
  216.     }
  217.     return 0;
  218. }
  219.  
  220. function getPixel(x, y, frame)
  221. {
  222.  
  223.     return [frame.data[(x + y * frame.width) * 4],
  224.     frame.data[(x + y * frame.width) * 4 + 1],
  225.     frame.data[(x + y * frame.width) * 4 + 2],
  226.     frame.data[(x + y * frame.width) * 4 + 3]]
  227. }
  228.  
RAW Paste Data