Is there any way to crop a photo using client side JavaScript only?
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.
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 <image> element to display it. As far as output, I was hoping for a data URI solution.
Several solutions exist, however, when I try using them (http://jsfiddle.net/sfjsfid/skm6V/1/), I get the error:
Uncaught Error: SECURITY_ERR: DOM Exception 18
The reason this happens is because the specification states that this error must be generated when you request an image from a different domain than where the page is hosted.
Is there any other way to have a pure client side JavaScript solution of cropping images which can come from a different domain?
If I try using a data uri instead of an image from a different domain (http://jsfiddle.net/VX2z2/), 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.
Hosting my own version of a web service or hosting server side code is not an option.
Any other ideas? Or is the only option to accept a data uri as the input?
If you want to break the security model, you’ll need to do something other than a web application — like a Firefox extension, for example. This would give you additional privileges for making requests, even saving the image.