Sunday, August 01, 2010

An image histogram in 30 lines of code



The source image ("Lena") at left.


Its pixel-distribution histogram.

According to Wikipedia, "An image histogram is a type of histogram which acts as a graphical representation of the tonal distribution in a digital image. It plots the number of pixels for each tonal value. By looking at the histogram for a specific image a viewer will be able to judge the entire tonal distribution at a glance."

It occurred to me that it shouldn't be that hard to get Google Charts to produce an image histogram, with just a few lines of code. And that turns out to be true. Around 30 lines of server-side JavaScript will do the trick.

If you have JDK 6, run the command "jrunscript" in the console (or find jrunscript.exe in your JDK's /bin folder and run it). Then you can cut and paste the following lines into the console and execute them in real time. (Alternatively, download js.jar from the Mozilla Rhino project, and run "java -cp js.jar org.mozilla.javascript.tools.shell.Main" in the console.)

The first order of business is to open and display an image in a JFrame. The following 9 lines of JavaScript will accomplish this:

imageURL = "http://wcours.gel.ulaval.ca/2009/a/GIF4101/default/8fichiers/lena.png";
IO = Packages.javax.imageio.ImageIO;
image = IO.read( new java.net.URL(imageURL) );
frame = new Packages.javax.swing.JFrame();
frame.setBounds(50,80,image.getWidth( )+10,
    image.getHeight( )+10);
frame.setVisible(true);
pane = frame.getContentPane();
graphics = pane.getGraphics();
graphics.drawImage( image,0,0,null );

The next order of business is to set up a histogram table, loop over all pixel values in the image, tally the pixel counts, and form the data into a URL that Google Charts can use:

function getMaxValue( array ) {

for (var i = 0,max = 0; i < array.length; i++ )
    max = array[ i ] > max ? array[ i ] : max;

return max;
}

// get pixels
width = image.getWidth();
height = image.getHeight();
pixels = image.getRGB( 0,0, width, height, null, 0, width );

// initialize the histogram table
table = (new Array(257)).join('0').split('');

// populate the table
for ( var i = 0; i < pixels.length; i++ )
    table[ ( pixels[ i ] >> 8 ) & 255 ]++;

maxValue = getMaxValue( table );

data = new Array();

for ( var i = 0; i < table.length; i++ )
    data.push( Math.floor( 100 * table[ i ] / maxValue ) );

data = data.join(",");

url = "http://chart.apis.google.com/chart?chxt=y&chbh=a,0,0&chs=512x490&cht=bvg&chco=029040&chtt=histogram&chd=t:"

// call Google Charts
image = IO.read( new java.net.URL( url + data ) );

// draw the resulting image
graphics.drawImage( image,0,0,null );

Note that we actually tally only the green pixel values. (But these are the most representative of tonal values in an RGB image, generally.) Table values are normalized against maxValue, then multiplied by 100 to result in a number in the range 0..100. Google obligingly plots the data exactly as shown in the above graphic.

And that's about all there is to say, except: Why can't all graphics operations be this easy? :)

9 comments:

  1. Anonymous11:14 AM

    Very cool!

    ReplyDelete
  2. By; Viagra Asli
    Hello sir thank you, I've visited your blog and I have read the article from the beginning to the end, thank you sir I got a good lesson, may be useful for me, thank you sir hope your job will be a blessing.
    Alat Bantu Sex , Alat Bantu Sex Terbaru , Sex Toys Terbaru

    Best wishes

    ReplyDelete
  3. artikel yang saya baca ini sangan membantu buat saya juga menambah masukan.
    saya ingin sedikit berbagi pengalaman soal obat bius yang sangat populer di tahun ini karena banyak sekali keluhan dari konsumen masalah kurang harmonis dalam hubungan pasutri. bagi anda yang mengalami hal tersebut janganlah berkecil hati karena kami akan mengatasinya dengan jual obat bius asli germany yang mempu membuat wanita pingsan sekaligus merangsang akan naik gairah seksual yang dahsyat.

    banyak ada yang salah menilai obat bius itu sama khasiatnya dengan obat tidur akan tetapi sangatlah berbeda fungsinya sudah jelas untuk mengatasi insomnia atau susah tidur karena memang penyakit tersebut sangatlah tidak enak bahkan bisa menyebabkan mata menjadi buram juga berkurangnya nafsu makan.

    tetapi bagi anda yang mengalami ganguan susah tidur tidak usah kawatir sebab kami jual obat tidur yang sudah puluhan tahun menjadi kepercayaan bagi konsumen dengan layanan ramah juga sopan karena kepuasan konsumen adalah pilihan utama. obat tidur cair salah satunya yang mempunyai kandungan khusus mampu membuat orang cepat tertidur hingga lelap sekaligus bisa menyembuhkan penyakit insomnia.

    ReplyDelete
  4. Terimakasih Admin atas informasinya. saya sangat senang membacanya karena sangat menarik. baca juga artikel saya salah satunya obat bius merupakan salah satu obat medis yang sudah di kenal sejak lama biasanya para dokter menggunakanya sebagai senjata utama saat operasi agar pasien tidak merasakan sakit apapun juga bisa di gunakan untuk mengatasi orang yang mengalami gangguan jiwa sedang mengamuk agar bisa tenang
    namun para remaja lebih menyukai berbentuk obat bius cair dengan alasan guna mengatasi ganguan hubungan rumah tangga karena banyak sekali salah satu dari pasangan merasakan kebosanan hubungan intim hal inilah yang menjadikan kurang harmonis.
    tetapi ada yang salah kaprah untuk membedakanya soal obat tidur dengan sama jenisnya padahal kegunaanya berbeda sebab obat tidur sebagai bahan pokok mengatasi insomnia atau susah tidur dan obat bius untuk membuat orang pingsan.
    tentunya obat tidur juga banyak jenisnya seperti obat tidur cair cara menggunakanya di campurkan ke minuman cukup di kasihb 5 tetes saja ke dalam satu botol minuman tinggal di aduk merata.

    ReplyDelete

  5. this article I read is very helpful for me also add input.
    obat bius

    ReplyDelete

Add a comment. Registration required because trolls.