jquery - Extract binary or base64 from <img> -


is there way access full binary representation (or base64 encoding) when displaying img in jquery / javascript? such as

<img id="myimage" src="http://someurl/someimage.png" /> 

javascript

$('#myimage).getbuffer() 

the reason: want put image origin in canvas , modify it. putting source directly in canvas (see this), nothing (same-origin-policy violation?). ajax requests have same problem.

i can (and did) modify server allow new external origin (cors). works, such origin dynamic local ip , better have purely client-side.

there isn't one. can not on client side override same-origin policy (unless hack browser or make own prevent browser set tainted flag (or rather origin-clean flag) on canvas :-) ).

as long origin of source image !== origin of page standard require browser set canvas tainted unless source server accept usage other origin. there no solutions on client side around (for "security reasons").

the image argument not origin-clean if htmlimageelement or htmlvideoelement origin not same entry script's origin, or if htmlcanvaselement bitmap's origin-clean flag false, or if canvasrenderingcontext2d object scratch bitmap's origin-clean flag false.

source: whatwg 4.8.11.2.9 (last paragraph)

and if (4.8.11.2.16):

... if scratch bitmap's origin-clean flag set false, must throw securityerror exception;...

the options got is:

  1. modify source server provide access-control-allow-origin (minimum) header (as did) , use crossorigin attribute in image tag (<img src="other-site" crossorigin />, default state anonymous - it's request , server accept it.
  2. use own server proxy image source server , provide 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 image yourself, need "upload" image client in case through file api , parse there more inconvenient imho (going through own server acting proxy bit simpler).


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -