Created on July 19, 2013 15:34 | Updated over 7 years ago
Link: https://gist.github.com/jywarren/6040039
Prompts you for a pixel row and # of lines to smooth, and averages them. Does not yet save.
setup: function() { // code to run on startup smooth_initiate = function() { alert('Click on the spectrum image to choose a starting row.') $('#image').click(function(e){ smooth_complete(e.offsetY) }) } smooth_complete = function(row) { var rows = prompt("How many rows of data below the selected row would you like to average?") var orig_img = $('#image')[0] $('body').append("<canvas id='tmp_canvas'></canvas>") var img = new Image() img.src = orig_img.src var canvas = $('#tmp_canvas')[0] canvas.width = img.width canvas.height = img.height var ctx = canvas.getContext("2d") ctx.drawImage(img,0,0) var pixels = ctx.getImageData(0,row,canvas.width,rows).data // now, sum pixels & cheat: just overwrite existing calibrated (or uncalibrated) pixel rows $.each($W.spectrum['lines'],function(index,line) { // clear out existing data line['r'] = 0 line['g'] = 0 line['b'] = 0 // for each row of data, add new data for (var i=0;i<rows;i++) { line['r'] += pixels[i*canvas.width*4+index*4] line['g'] += pixels[i*canvas.width*4+index*4+1] line['b'] += pixels[i*canvas.width*4+index*4+2] } // divide to get average per channel line['r'] = line['r']/rows line['g'] = line['g']/rows line['b'] = line['b']/rows // average colors to get overall line['average'] = (line['r'] + line['g'] + line['b'])/3 }) // graph smoothed data: var graph_data = [] $.each($W.spectrum.lines,function(index,line) { if (line.wavelength == null) { line.wavelength = index } graph_data.push([line['wavelength'],line['average']/2.55]) }) $W.data.push({label: "Smoothed", data: graph_data}) flotoptions.colors.push("#ff0000") $W.plot = $.plot($("#graph"),$W.data,flotoptions); // upload and save, refresh page // not quite yet } smooth_initiate() }, draw: function() { // code to run every frame }