title: Cropping a photo using only JavaScript which accepts a URL as input
body: <p>Is there any way to crop a photo using client side JavaScript only?</p>
  
  <p>When I tried searching for such a tool, the JavaScript part always uses DHTML to simply allow the user to select which area of an image to crop and then sends that information to a server side script (e.g. ASP, PHP) to actually perform the crop.</p>
  
  <p>I realize that JavaScript can't create files or request them, however I think workarounds should be possible. As far is input, I want the JavaScript file to take in a URL of an image. This is simple and you can easily create an <code>&lt;image&gt;</code> element to display it. As far as output, I was hoping for a <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" rel="nofollow noreferrer">data URI</a> solution.</p>
  
  <p><a href="https://stackoverflow.com/questions/2516117/how-to-scale-an-image-in-data-uri-format-in-javascript-real-scaling-not-using/2521335#2521335">Several</a> <a href="https://stackoverflow.com/questions/934012/get-image-data-in-javascript">solutions</a> exist, however, when I try using them (<a href="http://jsfiddle.net/sfjsfid/skm6V/1/" rel="nofollow noreferrer">http://jsfiddle.net/sfjsfid/skm6V/1/</a>), I get the error:</p>
  
  <blockquote>
    <p>Uncaught Error: SECURITY_ERR: DOM Exception 18</p>
  </blockquote>
  
  <p>The reason this happens is because the <a href="http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements" rel="nofollow noreferrer">specification</a> states that this error must be generated when you request an image from a different domain than where the page is hosted.</p>
  
  <p>Is there any other way to have a pure client side JavaScript solution of cropping images which can come from a different domain?</p>
  
  <p>If I try using a data uri instead of an image from a different domain (<a href="http://jsfiddle.net/VX2z2/" rel="nofollow noreferrer">http://jsfiddle.net/VX2z2/</a>), it works correctly. However, to be able to use a URL to an image as the input, I would need to convert it to a data URI somehow. Using a canvas won't work because of the security issues I have already discussed. Even if I find a web service which I could use, it wouldn't work either because then I would be sending an Ajax request to an external domain, which is another security risk that is blocked by the browser.</p>
  
  <p>Hosting my own version of a web service or hosting server side code is not an option.</p>
  
  <p>Any other ideas? Or is the only option to accept a data uri as the input?</p>