Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <title>Pixel Tracer</title>
</head>
<body>
  <canvas id="test1" width="728" height="1222"></canvas>
​
 <script>
 function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
 function Load_mg(can_id,mg_src) {
    var ctx = document.getElementById(can_id);
    if (ctx.getContext) {
        ctx = ctx.getContext('2d');
        var img1 = new Image();
        img1.onload = function () {
            ctx.drawImage(img1, 0, 0);
        };
        img1.src = mg_src;
    }
var can_ida = document.getElementById(can_id);  
var imgData = ctx.getImageData(0,0,can_ida.width,can_ida.height);
// var imgData = ctx.getImageData(10, 10, 50, 50);
var data = imgData.data;    
​
for(var i=0; i<data.length; i+=4) {
  var red = data[i];
  var green = data[i+1];
  var blue = data[i+2];
  var alpha = data[i+3];
  if(red != 0){
  console.log('some color found');
  break;
  }
  var hex = "#" + ("000000" + rgbToHex(red,green, blue)).slice(-6);
//  console.log('can_data hex '+hex+' Alpha '+alpha);
  //if(i === 1000)break;  
}
​
console.log(data);
    
} // function end point
Load_mg('test1','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABSCAYAAADZ5bMoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAMFSURBVHhe7dyxamJBFIDhY0K4RcTCENJIBCVNsDCFreBjBBs7n0DQFHkAn8B3SBHyBJYWCnZJkYikELURVFIIxlnP7DW72Tu7m2XnHu/MnB8OxlPcST7EGIXEAEBsx+iEMOdHOPBvjS4Ww8eNGVkBblIMTpwV4PwcTphJ2JjR4KZhY8aCm4iNGQluKjZmHLjJ2JhR4KZjY8aA24CNGQFuCzYWeXCbsLFIg9uGjUXy7VkboXdF7hFuMzYWKXDbsbHIgLuAjUUC3BVsbO/gLmFjewV3DRvbG7iL2NhewF3FxsjBXcbGSMFdx8bIwBn7eyTgjP2j0MEZ+3OhgjN2sNDeng0Te71ew2KxkLebzcbfmpF28LCg2+02dDod6Ha78Pz8DNPpFFarlUQ3Ka3gurFfXl7g5uYG7u7u5P1kMglXV1eQTqchk8lAPB4Hz/OMe+rC7/a/R2ej0UiUSiV53UQiIW5vb0Wv1xPz+TxwroGjXP7T6KxSqchrXl5eivv7+8BZFoxy+eXR1WQyEYVCQV6z2WwGzrFolMsvja4eHx/l9U5PTyX8r+dYNsrlX0dXT09P8nr5fF5sX+oFzrFwlMs/jq52vwRzuVzgDItHufzt6KxYLIqTkxMxm82UZ1k6yqVydFar1eQ1X19fA+dYPsplYHS2XC7lNev1euAcB0a5/DS6u76+Fufn52L7p7nyPMtHufwY3Q2HQ3ndVqsVOMuRUS7lhFGj0VCe5dAolz6P/jzPE+VyWXmmC6P8AGLr4n+lt+3LP/mWarVa9Tfu9QkcocPCxh4eHuDw8BBSqZS/ca8P8DChd/X7fchms/K9bFeT4BTY2GAwgIuLC/+emx1QYWPj8RjOzs78e24W6qf2P/f+/g5vb29wfHzsb9yMFBw/YT86OvI3bkYGvovyKSyKkYGb9I/Awoz8Ee56DE4cgxPH4MQxOHEMThyDE8fgxDE4cQxOHIMTx+DEMThxDE4cgxPH4MQxOHEMThyDE8fgxDE4cQxOHIMTx+DEMThxDE4cg5MG8A0pyIcM+KjWwQAAAABJRU5ErkJggg==');
​
 </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers