Skip navigation
Tibor Szasz
Currently Being Moderated

HTML Canvas security error in AIR

Feb 2, 2011 12:26 PM

Hello,

 

I run out of ideas: my problem is that I have to download an image from a server in my application an then invert it and I want to do it with JavaScript.

 

First I download the image (because using a web URL wouldn't work, just like in regular borwsers) to the applicationStorage directory, then I display it in an IMG tag, then an image manipulation library (Pixastic) is loaded. I get the same exception: SECURITY_ERR: DOM Exception 18, like if I used the original URL.

 

var file = air.File.applicationStorageDirectory; 
file = file.resolvePath("test.jpg");
 
var fileStream = new air.FileStream(); 
fileStream.open(file, air.FileMode.WRITE);
 
var request = new air.URLRequest("http://blogs.adobe.com/bobddv/images/waveform.jpg"); 
var loader = new air.URLLoader();
loader.dataFormat = air.URLLoaderDataFormat.BINARY;
loader.addEventListener(air.Event.COMPLETE, completeHandler);  
loader.load(request);
 
function completeHandler( event )
{
     $('test').innerHTML = 'Ready: ' + file.url;
     bytes = event.target.data;
     
     fileStream.writeBytes(bytes, 0, bytes.length);
        fileStream.close(); 
 
     /**
      *      Do effect on image
      */
     var img = new Image();
     img.onload = function() {
          Pixastic.process(img, "invert", { invertAlpha:true });
     }
     document.getElementById('test').appendChild(img);
     img.src = 'app-storage:/test.jpg';
}

 
Replies
  • Chris Campbell
    9,455 posts
    May 4, 2010
    Currently Being Moderated
    Feb 4, 2011 5:47 PM   in reply to Tibor Szasz

    Hi Tibor,

    I suspect this is probably as designed, but I've forwarded this post along to our Webkit/Javascript team for their review.

     

    Thanks,

    Chris

     
    |
    Mark as:
  • Chris Campbell
    9,455 posts
    May 4, 2010
    Currently Being Moderated
    Feb 8, 2011 1:36 PM   in reply to Tibor Szasz

    Hi Tibor,

    Thanks for following up with the solution that worked for you!

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2012 4:33 AM   in reply to Tibor Szasz

    Hi Tibor,

     

    I'm facing the exact same problem, could you please tell me how yot it working?

     

    Thanks

    Nico

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2012 7:38 AM   in reply to nrako

    Are you able to use canvas.toDataURL() method to retrieve the base64 code when there is base64 images used to render the canvas? I'm able to render the canvas within base64 image but then I can't retrieve the base64 data of the canvas itself with the toDataURL() method, instead it throw the same exception dom security error 18...

     

    It seems like a bug for me, but I dont knows whose fault it is? img base64 data can be rendered but then the canvas can't anymore return base64 data? not very logical

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 7:53 AM   in reply to Tibor Szasz

    After spending hours fighting this problem, I finally wrote a simple app to test the security allowances of the Canvas element in AIR. It appears that you cannot use getImageData() or toDataURL() (because both are a method to get the pixel data out of a canvas) if the canvas has something drawn on it from anywhere but the ApplicationStorage directory. The ApplicationStorageDirectory and base64 encoded images both cause the same security error.

     

    This is extremely frustrating as the ApplicationStorage directory is read-only to the application itself. In my case I have a little camera utility that will take pictures with my webcam, and I want to apply some filters and effects to a Canvas element that has some of these photos drawn to it. In order to accomplish this, I currently have the webcam utility (which is run via the NativeProcess class) saving files to the ApplicationStorage directory so I can manipulate them afterward. This is less than ideal because the ApplicationStorage directory is not meant to be the dumping ground for files created or maintained while the app is running (hence it being read-only).

     

    So please, please, please, pass this along so someone who might be able to help adjust the Webkit implementation of the Canvas element to allow either base64 encoded data or images stored in the ApplicationStorageDirectory to be drawn to and manipulated (including getImageData() and toDataURL()) on a canvas.

     

    Thanks!

     
    |
    Mark as:
  • Chris Campbell
    9,455 posts
    May 4, 2010
    Currently Being Moderated
    Mar 12, 2012 3:05 PM   in reply to Alma M.

    Alma,

    Would you mind putting that info into a new bug/feature request over at bugbase.adobe.com?  If so, please post back with the URL so that others that encounter the same limitation can vote for your report.  Getting enough people to show interest will give this the best shot at being addressed.

     

    Thanks,

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 4:18 PM   in reply to Tibor Szasz

    Thanks Chris.

     

    See my bug report:

    https://bugbase.adobe.com/index.cfm?event=bug&id=3135965

     

    Please vote it up if you would like to see this fixed.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 5:24 PM   in reply to Tibor Szasz

    I'm trying to get this to work too. Would you be able to provide the complete code that you were able to get to work? Thanks..

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points