如何使用js在网络浏览器中修剪图像并将其保存在服务器上？答案

【问题标题】：How to trim image in the web-browser using js and save it on server then?如何使用js在网络浏览器中修剪图像并将其保存在服务器上？
【发布时间】：2012-04-07 10:33:37
【问题描述】：

我正在寻找一些 jQuery 插件或类似的东西。

例如，我需要在网站上裁剪一张照片并将结果保存在服务器上。

我知道用 Adobe Flash 做比较好，但我确实需要用 JS 做。

【问题讨论】：

没有比 Adobe Flash 更好的了。但是，我认为您应该做的是在服务器上裁剪图像，那里有任意数量的基于 PHP 的图像处理库供您使用。
@mblase75：除了您友好的邻里 TSA 代理人进行的直肠检查。
@mblase75 基于 PHP 是个好主意，但是如何从浏览器发送新参数呢？有什么js插件可以发吗？

标签： php javascript jquery prototypejs

【解决方案1】：

查看jCrop。它非常适合这些东西。

【讨论】：

JCrop 非常适合选择要裁剪的区域，但对实际裁剪图像没有任何作用。你必须自己做。
@Cixate 它的作物很好deepliquid.com/projects/Jcrop/demos.php?demo=live_crop。不是吗？
它的裁剪非常好，但是通过将其发送到服务器供 PHP/gd 进行裁剪来实现。我的印象是您想在 Javascript 中调整大小/裁剪。

【解决方案2】：

您正在寻找JCrop

这里有一些demos。

这是一个在 PHP 上实现的example。

【讨论】：

【解决方案3】：

很少有浏览器支持使用 Javascript 选择图像并在不先将其上传到服务器的情况下对其进行操作。相反，您需要：

允许用户上传图片到服务器
上传完成后，将图像（使用 PHP）调整为浏览器可管理的大小以供预览
在浏览器中以JCrop 之类的形式显示调整大小的预览图像
用户选择裁剪区域后，让他们点击“保存”
保存时，将裁剪区域的坐标传递给服务器/PHP 以使其裁剪原始图像。您必须将预览的坐标缩放为原始图像的坐标。
使用 PHP 将新图像保存到磁盘/S3/任何东西

我设法做到了这一点，而无需使用我的服务器或使用http://transloadit.com/ 让图像接触我的服务器。我使用 transloadit 的 Javascript 上传表单上传到他们的服务器存储 (S3) 并使用模板保存原始文件并调整大小以供预览。原始和预览都存储在 transloadit 的临时 S3 帐户中，而不是我的。然后我使用 JCrop 向用户显示预览。一旦他们选择了裁剪区域，我就会告诉 transloadit 裁剪原始照片，但使用我的裁剪坐标（从预览图像缩放以适合原始图像）使用一个模板，该模板也可以制作几个缩略图大小。然后 Transloadit 将所有图像保存到我的 S3 帐户并告诉我保存图像的 URL。

【讨论】：

感谢您的回答。对不起我的英语，我的意思是也使用 PHP。