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

Question

让我用一张图片来总结一下这个场景:

我正在尝试在我的网站中创建一个设置个人资料图片的功能。我想要一个页面在图像字段中以原始尺寸显示上传的图像，但个人资料图片的大小应该是 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 是可拖动的，并且图像是可调整大小的。

谢谢。

Answer 1

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

获得这些坐标后，您可以根据 div 的尺寸和坐标指定该图像的裁剪部分，并使用本教程:

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

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

保存后，您可以遵循以下答案:

How to save a HTML5 Canvas as Image on a server

将其保存到服务器。