www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] putImageData always blank after pixel-by-pixel processing

  1. #1
    Join Date
    Jul 2010
    Posts
    22

    resolved [RESOLVED] putImageData always blank after pixel-by-pixel processing

    Hello all.
    I'm quite new to HTML5, so i guess i'm just doing something wrong. What exactly is wrong is beyond me
    So, i have a canvas element with an image already put onto it by the "drawImage" function.
    Then i implement this seemingly easy piece of code:

    PHP Code:
    function imgInvert(canvas_ID)
    {
        var 
    imgD document.getElementById(canvas_ID).getContext("2d").createImageData
                    
    (
                        
    document.getElementById(canvas_ID).width
                        
    document.getElementById(canvas_ID).height
                    
    );
                    
        for (var 
    0imgD.data.length+= 4
        {
            
    imgD.data[i  ] = 255 imgD.data[i  ]; // red
            
    imgD.data[i+1] = 255 imgD.data[i+1]; // green
            
    imgD.data[i+2] = 255 imgD.data[i+2]; // blue
            // leaving the alpha channel as it is
        
    }
        
        
    document.getElementById(canvas_ID).getContext("2d").putImageData(imgD00);

    and after the "putImageData" method is implemented, i'm left with a blank canvas instead of at least something.

    Moreover, this part of code is basically ripped off this tutorial.
    Somehow, there it works. On my page, it doesn't so far.

    Any help will be much appreciated!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change:
    Code:
        var imgD = document.getElementById(canvas_ID).getContext("2d").createImageData
                    (
                        document.getElementById(canvas_ID).width,
                        document.getElementById(canvas_ID).height
                    );
    to:
    Code:
    var c =document.getElementById(canvas_ID);
    var imgD = c.getContext("2d").getImageData(0, 0, c.width, c.height);
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jul 2010
    Posts
    22
    Thanks for stopping by!

    Sadly, with this code, i'm getting an "Uncaught Error: SECURITY_ERR: DOM Exception 18" on the line var imgD = c.getContext("2d").getImageData(0, 0, c.width, c.height);
    (testing in Google Chrome 5.0.375.99)

    Mozilla Firefox also sits there not doing anything and displays the following in the error console:
    Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///Z:/Personal/Webdes/editor/desktop/script.js Line: 107"])

    I googled the error and couldn't find a direct explanation of what it might mean

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The basic code runs correctly in Chrome. The error is due to some other code you are using.
    Give a link or full code.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jul 2010
    Posts
    22
    Sorry for the delay, i've been quite busy these days, unfortunately...
    And thanks for taking your time to look into this issue.

    I found out that the method you suggested works only if the file is placed on a host, such as this. This is perfect, i couldn't thank you enough!
    However, it fails to work if the file is in a local folder (like file:///Z:/Personal/test02.php). It "finds canvas" and fails with the above mentioned error right after that.

    I have a feeling that createImageData does create a blank array indeed, but for some reason it works well in the tutorial i previously gave a link to...
    Here's the initial file and here's the tutorial again.

    OK, that question bothers me much less now All in all, i still have one tiny question: why does the method you suggested work when placed on a remote server and doesn't work when it's in a local folder?
    It sure doesn't need to process server-side, right?

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    afaik it is a security issue. canvas can only access server images.
    You will have to upload the image to the server first.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Jul 2010
    Posts
    22
    Fang, a million thanks for everything!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles