如何裁剪图像的任何选定区域并将其保存到服务器？

让我用图片总结一下情景：

我正在尝试制作一个function，用于在我的网站中设置个人资料图片。我想有一个页面在图像字段中以原始大小显示上传的图像，但个人资料图片的大小应该是200 * 153所以我想要那个用户可以调整图片的大小，并将一帧（帧大小为200 * 153）拖动到resize的图片的任何区域，他们想要成为他们的个人资料图片，当他们点击保存按钮时，只需要在框架被歪曲并将该区域保存到服务器。

想象一下，这些是HTML代码：

请注意，div是可拖动的，图像可以resize。

谢谢。

Answer 1

首先将图像和div放在同一个包装器div中。 我会这样做是因为它允许你更容易在div上使用jquery的坐标函数而不是图像。

一旦有了这些坐标，就可以拍摄由div的尺寸和坐标指定的图像的裁剪部分，并使用本教程：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

将该部分保存到HTMLcanvas元素上。 如果您愿意，canvas元素可以是不可见的。

一旦保存，您可以按照以下答案：

如何在服务器上将HTML5 Canvas另存为Image

将其保存到服务器。

Answer 2

好的，首先你必须使用服务器端语言来实际保存裁剪的图像。 我会使用Jcrop进行裁剪，然后将其发送到服务器以进行保存。

同样，您不能仅使用javascript在服务器上保存文件！

Answer 3

我相信这几乎就是你要找的东西： jQuery jCrop

只是，不是保存文件，而是使用“强制下载”标题将其输出到屏幕上

Answer 4

您可以使用此php类来屏蔽具有大小为200 * 153的maskingimage的图像。 它将使用基于像素的alpa通道映射精确裁剪精确区域。 无论掩模图像具有Alpha通道0（透明部分），它都会通过抓取该区域的像素进行裁剪，并在您的情况下将图像重新生成新的所需大小。 您必须在服务器中保留大小为200 * 153像素的掩码图像才能使用。 在这里，您还可以通过ajax调用传递新的已resize的坐标，并相应地裁剪图像。

https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php

如果您可以选择使用服务器端脚本，它将起作用。 以上链接是相同的概念certificate。