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

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元素可以是不可见的.

一旦保存,您可以按照以下答案:

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

将其保存到服务器.