Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Split,Croatia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    canvas source as variable

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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]);
    }

  • Users who have thanked devnull69 for this post:

    MarinM (09-05-2012)

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Split,Croatia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 .

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    devnull69 (09-06-2012)

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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 :-)

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by devnull69 View Post
    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.
    Last edited by rnd me; 09-06-2012 at 12:05 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •