canvas source as variable

MarinM · 09-05-2012, 02:44 PM

Hi guys!

I am working on application based on canvas element which allows you to apply Edge Detection effect on image.

Successfully doing that i wanted to add FileReader or FIle API so user can browse his own image from disk.

So the problem is, lets say i'm using File API (if someone knows the reason FileReader is better let me know pls),i don't know how to address e.target.result to global variable chosenimage so i can call fuction draw again and re-draw on canvas.

Here is my code without filereader or file api,so if you can post how it should look with file api(or fileReader)

Looking forward to any kind of replies

Code:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Aplikacija Edge Detection</title>
  	<meta charset="utf-8" />
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Aplikacija</title>
		<meta name="description" content="" />
		<meta name="author" content="marin" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
	<noscript>Skripte se ne mogu pokrenuti u vasem pregledniku</noscript>
	
	<script type="text/javascript" src="raphael.js"></script>

 <script>
   	
   		var image =new Image();
   		var chosenimage = undefined;
   	function draw() { 
 
        var c=document.getElementById('canvas1');
        var cxt=c.getContext('2d');
        var image = new Image();
        image.src="pipes.jpg";
        cxt.drawImage(image,0,0);
      	 }
    
  	function init() {
   			 image.onload = edge;
			 image.src="pipes.jpg";   						}
  	function edge() {
     var canvas = document.getElementById('canvas1');
     var context = canvas.getContext('2d');

     context.drawImage(image, 0, 0);

     // get the image data to manipulate
     var input = context.getImageData(0, 0, canvas.width, canvas.height);

     // get an empty slate to put the data into
     var output = context.createImageData(canvas.width, canvas.height);

    
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     //EDGE DETECTION
     for (var y = 1; y < h-1; y += 1) {
       for (var x = 1; x < w-1; x += 1) {
         for (var c = 0; c < 3; c += 1) {
           var i = (y*w + x)*4 + c;
           outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                 -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                 -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
         }
         outputData[(y*w + x)*4 + 3] = 255; // alpha
       }
     }
     context.putImageData(output, 0, 0);
   }
		
  </script>
      <style type="text/css">some long css code here </style>
</head>
 <body>
 	<script type="text/javascript">
	    window.onload = draw ;
	     
   
	</script>
 	<div id="okvir" style="display: block; margin-left: 100px; margin-top: 35px;">
			<canvas id="canvas1" width="650" height="530" >Your browser does not support canvas.
				</canvas>
						
			<div id="edge">
					
						<button  onclick="init()" >Edge detection</button>
			</div>
									
			<div id="unos">
			
						<input type="file" id="uploadImage" name="myphoto" onchange="loadImageFile();" >
					
			</div>
						
	</div>
 </body>
</html>

devnull69 · 09-05-2012, 03:00 PM

Afaik, FileReader is part of the File API

Code:

var input = document.getElementById('uploadImage');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var myCanvas = document.getElementById('canvas1');
    var ctx = myCanvas.getContext('2d'),
    reader = new FileReader();

    reader.onload = function(event) {
        var img = new Image();

        img.onload = function() {
            myCanvas.width = img.width;
            myCanvas.height = img.height;
            ctx.drawImage(img, 0,0);
        };

        img.src = event.target.result;
    };

    reader.readAsDataURL(e.target.files[0]);
}

MarinM · 09-05-2012, 04:28 PM

I guess i'll have to do a lot more of reading before asking questions.

I needed to change somethings in the code but thanks a lot kind sir, I appreciate it .

rnd me · 09-06-2012, 12:00 AM

you can also use window.URL() to turn any blob (including a File object) into js/html addressable url. This method is MUCH faster than dataURLs when dealing with large images.

devnull69 · 09-06-2012, 06:55 AM

Hey this is great, I didn't know this yet

Nevertheless it's window.URL.createObjectURL() rather than window.URL(), see https://developer.mozilla.org/en-US/...reateObjectURL

I will definitely test this soon :-)

rnd me · 09-06-2012, 12:02 PM

Quote:

Originally Posted by devnull69

Nevertheless it's window.URL.createObjectURL() rather than window.URL(), see https://developer.mozilla.org/en-US/...reateObjectURL

good eye. my polyfills are reducing my astuteness. the method names have been all over the place, but window.URL is now officially reserved...

the past 12 months have been insane in terms of webdev tech. the other cool part is that these things sneak in instead us of waiting for our next dell purchase. the web ain't what is was five years ago. i've been pushing hard for better dev apis, and finally, after a light sprinkle from chrome and ff for years, it's starting to pour. by xmas we'll have featues that don't exist now hit 75% device coverage.

a three-month old browser? dang- you need to update...

buckle your seat belt, javascript's taking off.