仅使用接受URL作为输入的JavaScript来裁剪照片

Question

有没有办法只使用客户端JavaScript裁剪照片？

当我尝试搜索这样的工具时，JavaScript部分总是使用DHTML来简单地允许用户选择要裁剪的图像区域，然后将该信息发送到服务器端脚本（例如ASP，PHP）执行作物。

我意识到JavaScript无法创建文件或请求它们，但我认为解决方法应该是可行的。到目前为止，我希望JavaScript文件包含图像的URL。这很简单，您可以轻松创建<image>元素来显示它。就输出而言，我希望有一个data URI解决方案。

Several solutions存在，但是，当我尝试使用它们时（http://jsfiddle.net/sfjsfid/skm6V/1/），我收到错误：

  

未捕获错误：SECURITY_ERR：DOM异常18

发生这种情况的原因是specification表示当您从不同的域请求图像时，必须生成此错误。

有没有其他方法可以获得可以来自不同域的裁剪图像的纯客户端JavaScript解决方案？

如果我尝试使用数据uri而不是来自其他域（http://jsfiddle.net/VX2z2/）的图像，则它可以正常工作。但是，为了能够使用图像的URL作为输入，我需要以某种方式将其转换为数据URI。由于我已经讨论过的安全问题，使用画布不起作用。即使我找到了一个我可以使用的Web服务，它也无法工作，因为那时我会向外部域发送Ajax请求，这是浏览器阻止的另一个安全风险。

托管我自己的Web服务版本或托管服务器端代码不是一种选择。

还有其他想法吗？或者是接受数据uri作为输入的唯一选择？

Answer 1

如果要打破安全模型，您需要执行除Web应用程序之外的其他操作 - 例如，Firefox扩展。这将为您提供额外的权限，甚至可以保存图像。

Answer 2

没有办法解决安全模型问题。您需要服务器端帮助来请求来自不同域的数据并从JavaScript访问它。