Javascript裁剪功能，不显示图像

Question

首先，我对javascript很新。我正在尝试开发一个javascript函数，它接受一个图像并返回该图像的裁剪版本。通过浏览谷歌，我发现我可能需要以某种方式使用画布来完成这项任务。但这是否意味着我必须在我的页面上显示图像？

我也查看过类似函数的不同javascript图像处理库，例如Pixastic的Crop，但我不知道如何使用它来解决我的特定问题。所以现在我转向你们寻求帮助。请指导我正确的方向！

谢谢！

Answer 1

Pixastic的裁剪解决方案似乎易于实现并使用画布。只要您不需要支持Internet Explorer 7或8，它就能完成这项工作。

否则，您只需使用CSS overflow:hidden;进行客户端裁剪即可。

Pixastic Solution：http://www.pixastic.com/lib/docs/actions/crop/，请查看示例代码标签。

这是Pixastic和CSS解决方案的一个工作示例：http://jsfiddle.net/EB6P7/1/

我使用了pixastic的jQuery插件。

-

如果您不需要在服务器端保存图像，我建议使用CSS解决方案，因为它不依赖于Javascript并获得与Pixastic相同的结果。

如果您有任何不明白的地方，请问我，因为我不知道您的HTML / CSS级别。

Answer 2

如果您的问题只是裁剪而不是保存裁剪的图像，我会说最简单的解决方案是使用CSS在div中定位图像并仅显示裁剪区域。

如果你想保存，那么我希望你需要在服务器端使用一些库来裁剪和保存

Answer 3

也许CSS Clipping功能是一个适合您的解决方案？

#someImage
{
 clip:rect(50px 100px 130px auto);
}