让我用一张图片来总结一下场景：
我正在尝试在我的网站中设置个人资料图片的功能。我希望有一个页面在图像字段中以原始大小显示上传的图片，但个人资料图片的大小应该是 200*153 所以我想要那个用户可以调整图片的大小，也可以将一个框架（框架大小为 200*153）拖到他们想要成为他们的个人资料图片的调整大小的图片的任何区域，当他们点击保存按钮时，只是在帧被裁剪并将该区域保存到服务器。
想象一下这些是 HTML 代码：
<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div>
<img id="test" src="~/Content/01052013626.jpg"/>
请注意，div 是可拖动的，图像是可调整大小的。
谢谢你。
首先将图像和 div 放置在同一个包装器 div 中。我会这样做是因为它可以让您更轻松地在 div 上而不是在图像上使用 jquery 的坐标函数。
获得这些坐标后，您可以截取由 div 的尺寸和坐标指定的图像的裁剪部分，并使用本教程：
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
将该部分保存到 HTML 画布元素上。如果您愿意，canvas 元素可以是不可见的。
保存后，您将遵循以下答案：
将其保存到服务器。
好的，首先您必须使用服务器端语言来实际保存裁剪后的图像。我会使用Jcrop进行裁剪，然后将其发送到服务器进行保存过程。
同样，您不能仅使用 javascript 在服务器上保存文件！
您可以使用这个 php 类来屏蔽具有大小为 200*153 的 maskingimage 的图像。它将使用基于像素的 alpa 通道映射精确裁剪确切区域。无论蒙版图像在哪里具有 alpha 通道 0（透明部分），它都会通过抓取该区域的像素进行裁剪，并将图像重新生成为您的情况所需的新大小。您必须在服务器中保留大小为 200*153 像素的蒙版图像以供使用。在这里，您还可以通过 ajax 调用将新调整大小的坐标传递给后端并相应地裁剪图像。
https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php
如果您可以选择使用服务器端脚本，它将起作用。上面的链接是相同的概念证明。
我相信这几乎正是您正在寻找的： jQuery jCrop
只是，不是保存文件，而是在屏幕上输出“强制下载”标题