让我用图片总结一下情景：
我正在尝试制作一个功能,用于在我的网站中设置个人资料图片.我想有一个页面在图像字段中以原始大小显示上传的图像,但个人资料图片的大小应该是200 * 153所以我想要那个用户可以调整图片的大小,并将一帧(帧大小为200 * 153)拖动到调整大小的图片的任何区域,他们想要成为他们的个人资料图片,当他们点击保存按钮时,只需要在框架被歪曲并将该区域保存到服务器.
<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元素可以是不可见的.
一旦保存,您可以按照以下答案：
How to save a HTML5 Canvas as Image on a server
将其保存到服务器.
