Overcome your weaknesses through the HTML5 Coding Assessment Test! Surpass your rivals starting next school term!

or

SPEC 審査結果発表!

Color Histogram using Web Workers

Follow

2010-08-01 20:47:20

License: MIT License

Fork: 0

Fav: 2

View: 1034

Play
Stop
Reload

Smart Phone

Readme
JavaScript 62 lines
HTML 11 lines
CSS 4 lines

Color Histogram using Web Workers
Worker process for calculate Histogram
Base64 Image Data

window.addEventListener('load', function(e) {
  var cImage = document.querySelector('#Image');
  var cHistogram = document.querySelector('#Histogram');
  var btn = document.querySelector('#Button');
  var ctxImage = cImage.getContext('2d');
  var ctxHistogram = cHistogram.getContext('2d');
  var image = new Image();
  var worker = new Worker('./cBJU/js/');

image.src = data;
  ctxHistogram.fillStyle = '#ffffff';
  ctxHistogram.fillRect(0, 0, cHistogram.width, cHistogram.height);

image.addEventListener('load', function(e) {
    ctxImage.drawImage(image, 0, 0);
    var imageData = ctxImage.getImageData(0, 0, cImage.width, cImage.height);
    worker.postMessage({
        width: imageData.width,
        height: imageData.height,
        data: imageData.data
    });
    btn.addEventListener('click', function(e) {
      worker.postMessage({
        width: imageData.width,
        height: imageData.height,
        data: imageData.data
      });
    }, false);

worker.addEventListener('message', function(e) {
      try {
        drawHistogram(ctxHistogram, e.data);
      }catch(e) {
        console.log(e);
      }
    }, false);

}, false);

function drawHistogram(ctx, bins) {
    var h = cHistogram.height;
    var max = 0.0;
    var sh = 16;
    var baseStr = '#';
    ctx.globalAlpha = 0.8;
    for(var ch in bins) {
      for(var j=0;j<256;j++) {
        ctx.strokeStyle = baseStr + (j << sh).toString(16);
        ctx.beginPath();
        ctx.moveTo(j, h);
        ctx.lineTo(j, Math.max(0.0, h - bins[ch][j]*h/bins.max));
        ctx.stroke();
        ctx.closePath();
      }
      sh -= 8;
      if(sh < 0) break;
      baseStr += '00';
    }
  }

}, false);

Color Histogram using Web Workers

window.addEventListener('load', function(e) { var cImage = document.querySelector('#Image'); var cHistogram = document.querySelector('#Histogram'); var btn = document.querySelector('#Button'); var ctxImage = cImage.getContext('2d'); var ctxHistogram = cHistogram.getContext('2d'); var image = new Image(); var worker = new Worker('./cBJU/js/'); image.src = data; ctxHistogram.fillStyle = '#ffffff'; ctxHistogram.fillRect(0, 0, cHistogram.width, cHistogram.height); image.addEventListener('load', function(e) { ctxImage.drawImage(image, 0, 0); var imageData = ctxImage.getImageData(0, 0, cImage.width, cImage.height); worker.postMessage({ width: imageData.width, height: imageData.height, data: imageData.data }); btn.addEventListener('click', function(e) { worker.postMessage({ width: imageData.width, height: imageData.height, data: imageData.data }); }, false); worker.addEventListener('message', function(e) { try { drawHistogram(ctxHistogram, e.data); }catch(e) { console.log(e); } }, false); }, false); function drawHistogram(ctx, bins) { var h = cHistogram.height; var max = 0.0; var sh = 16; var baseStr = '#'; ctx.globalAlpha = 0.8; for(var ch in bins) { for(var j=0;j<256;j++) { ctx.strokeStyle = baseStr + (j << sh).toString(16); ctx.beginPath(); ctx.moveTo(j, h); ctx.lineTo(j, Math.max(0.0, h - bins[ch][j]*h/bins.max)); ctx.stroke(); ctx.closePath(); } sh -= 8; if(sh < 0) break; baseStr += '00'; } } }, false); <section> <h2>Color Histogram using Web Workers</h2> <div class='wrap'> <canvas id="Image" width="196" height="196"></canvas> <canvas id="Histogram" width="256" height="196"></canvas> </div> <div> <input id="Button" type="button" value=" calculate " > <p>Firefox3.6, Chrome5.0, Safari5.0, Opera10.60 にて動作確認済。</p> </div> </section>body{ font-size:12px; color:#ccc; background-color:#000; text-align:center; margin:20px; } h2{ font-size: 120%; margin: 5px 0; } input[type="button"]{ font-family:Verdana, sans-serif; color:#fff; background-color:#666; border:none; padding:2px 8px; } input[type="button"]:hover{ background-color: #333; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/prjR/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/wellflat/prjR" title="Color Histogram using Web Workers">Color Histogram using Web Workers - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Tags

Favorite by

yoshimax

fingaholic