Search code examples
jquerycanvassame-origin-policy

Extract binary or base64 from <img>

Is there any way to access the full binary representation (or its base64 encoding) when displaying an img in jQuery / javascript? Such as

<img id="myImage" src="http://someURL/someImage.png" />

Javascript

$('#myImage).getBuffer()

The reason: I want to put an image from another origin in a canvas and modify it. Putting the source directly in the canvas (see this), I get nothing (Same-Origin-Policy violation?). AJAX requests have the same problem.

I can (and already did) modify the server to allow the new external origin (CORS). It works, but such origin is a dynamic local IP and it would be much better to have something purely client-side.

Solution

  • There isn't one. You can not do anything on client side to override same-origin policy (unless you hack the browser or make your own to prevent browser to set tainted flag (or rather origin-clean flag) on canvas :-) ).

    As long as the origin of the source image !== origin of page the standard require the browser to set canvas tainted unless source server accept usage from other origin. There are no solutions on client side to get around this (for "security reasons").

    The image argument is not origin-clean if it is an HTMLImageElement or HTMLVideoElement whose origin is not the same as the entry script's origin, or if it is an HTMLCanvasElement whose bitmap's origin-clean flag is false, or if it is a CanvasRenderingContext2D object whose scratch bitmap's origin-clean flag is false.

    Source: WhatWG 4.8.11.2.9 (last paragraph)

    And if so (4.8.11.2.16):

    ... if the scratch bitmap's origin-clean flag is set to false, it must throw a SecurityError exception;...

    The options you got is:

    1. Modify source server to provide Access-Control-Allow-Origin (minimum) header (as you already did) and then use the crossOrigin attribute in the image tag (<img src="other-site" crossOrigin />, default state is anonymous - It's only a request and up to the server to accept it.
    2. Use your own server as proxy to get the image from source server and provide that to client in same origin (e.g http://mysite/getImage.cgi|.aspx|.php|..?src=other-site/img).
    3. Modify browser... etc. :-P

    You can low-level parse the image yourself, BUT you will need to "upload" the image to the client in any case through File API and parse it from there which would be more inconvenient IMHO (going through your own server acting as a proxy is a bit simpler).