Drawing a line on an uploaded image then extracting the number of times the pixel changes colour along the line

JavaScript
1

Hi I am starting to learn javascript and have been looking at some examples. I am trying to make a line between two points on an uploaded image, then extract pixel information along that line. I can upload the image and get the pixel information when I click on it, but I can’t seem to be able to select the line or rectangle. I would also like to be able to count the number of times the pixel colour changes along the line. The code I am practising with is shown. Any help would be appreciated. Thanks.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<html>
<canvas width="600" height="300" id="canvas_picker"></canvas><br>
<input type="file" id="file_upload"><br>
<div id="hex">HEX: <input type="text"></div>
<div id="rgb">RGB: <input type="text"></div>

<div id="picked"></div>
<div id="jc_coords">
<form onsubmit="return false;">
	<label>X1 <input type="text" size="4" id="x" name="x" /></label>
	<label>Y1 <input type="text" size="4" id="y" name="y" /></label>
	<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
	<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
	<label>W <input type="text" size="4" id="w" name="w" /></label>
	<label>H <input type="text" size="4" id="h" name="h" /></label>
</form>
</div>

<style>
*{margin:0;}
canvas{background:#ddd;}
#picked span{
  display:inline-block;
  width:50px;
  height:50px;
  margin:3px;
  text-align:center;
  text-shadow:1px 1px 1px #000;
  font:8px/50px Arial;
  color:#fff;
}
</style>
<script>
var $picked = $("#picked"); // Just to preview picked colors
var canvas = $('#canvas_picker')[0];
var startX, startY;

var context = canvas.getContext('2d');


$("#file_upload").change(function (e) {
  var F = this.files[0];
  var reader = new FileReader();
  reader.onload = imageIsLoaded;
  reader.readAsDataURL(F);  
});

function imageIsLoaded(e) {
  var img = new Image();
  img.onload = function(){
    canvas.width  = this.width;    // If needed? adjust canvas size
    canvas.height = this.height;   // respective to image size
    context.drawImage(this, 0, 0); // Draw image at 0, 0, not at 10, 10
  };
  img.src = e.target.result;
}

$('#canvas_picker').click(function(event){
  var x = event.pageX - $(this).offset().left; // Fixed coordinates
  var y = event.pageY - $(this).offset().top; // respective to canvas offs.
  var img_data = context.getImageData(x,y , 1, 1).data;
  var R = img_data[0];
  var G = img_data[1];
  var B = img_data[2]; 
  var rgb = R + ',' + G + ',' + B ;
  var hex = rgbToHex(R,G,B);
  $('#rgb input').val( rgb );
  $('#hex input').val('#' + hex);
  $picked.append("<span style='background:#"+hex+"'>#"+hex+"</span>");




});

function rgbToHex(R, G, B) {
  return toHex(R) + toHex(G) + toHex(B);
}

function toHex(n) {
  n = parseInt(n, 10);
  if (isNaN(n))  return "00";
  n = Math.max(0, Math.min(n, 255));
  return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
}
    var can = document.getElementById('file_upload');
    var ctx = can.getContext('2d');
$(function(){
		$('#jcrop_target').Jcrop({
			onChange: showCoords,
			onSelect: showCoords
		});
	});

	
	function showCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#x2').val(c.x2);
		$('#y2').val(c.y2);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};

$(document).ready(function(){

    var imageDpi = 300;

    var can = document.getElementById('file_upload');
    var ctx = can.getContext('2d');





$("canvas").mousedown(function(event){
        startX = event.pageX;
        startY= event.pageY;

        $(this).bind('mousemove', function(e){
            drawLine(startX, startY, e.pageX, e.pageY);
        });
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });

    function drawLine(x, y, stopX, stopY){
        ctx.clearRect (0, 0, can.width, can.height);
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(stopX, stopY);
        ctx.closePath();
        ctx.stroke();

        // calculate length   
        var pixelLength = Math.sqrt(Math.pow((stopX - x),2) + Math.pow((stopY-y),2));
        var physicalLength = pixelLength / imageDpi;
        console.log("line length = " + physicalLength + 
                    " inches (image at " + imageDpi + " dpi)");
    }



});



 </script>




</html>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.