没有画布的Javascript图像裁剪可能吗?

时间:2016-01-08 18:45:47

标签: javascript html5 image canvas crop

网上有很多用于Javascript图像裁剪/调整大小的脚本和插件。 Some使用HTML5画布裁剪某个区域并通过DataUrl将图像存储回客户端。但是没有画布我测试了jrac jquery插件,但它最后只提供了裁剪坐标(x,y,width,height)。从未在图像上调用过实际的裁剪功能。

如何在Javascript图像对象上实际使用这些裁剪坐标?我是否可以仅使用CSS来显示图像被裁剪,还是可以将该图像中的数据实际裁剪为Javascript中的新图像?

在我看来,所有的图像裁剪插件只提供方便的UI来获取裁剪坐标,但实际的裁剪/调整大小必须在服务器端完成,图像被发送到php脚本,这是正确的吗?

我的问题与此one相同,尚未得到回答。

3 个答案:

答案 0 :(得分:2)

一切皆有可能在javascript(几乎所有东西)

要裁剪图像,您需要侧面执行DOM并内置图像处理API并自行解码图像。还有很多额外的工作,但有一些帮助。快速搜索github找到jpg和png格式Image decoders的解码器/编码器(我相信还有更多的东西)所以只需要做一些工作就可以修改它们来做一些裁剪。

答案 1 :(得分:0)

你要求的是一个库,用于将图像数据读取到2d像素数组(或者在画布的情况下为1d像素数组),裁剪像素,然后将其写回压缩图像数据。

很抱歉,但该库是画布。当然,您可以使用css来伪造它,但所有图像数据仍然存在,您只是选择仅显示其中的一部分。

答案 2 :(得分:0)

您可以尝试以下方法,但它使用Canvas进行渲染,

截至目前,如果没有画布,没有好的库可用,因为很难捕获你选择的点并且在没有图形卡的情况下处理成千上万的像素,

Canvas只具有使用图形卡的功能

intel和firefox正在做一些关于这个的概念,以便在javascript中引入并行处理

https://github.com/fengyuanchen/cropper/