我用一张图来总结一下这个场景：
我正在尝试在我的网站中创建一个设置个人资料图片的功能。我想要一个页面在图像字段中以原始尺寸显示上传的图像，但个人资料图片的大小应该是 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/ http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
将该部分保存到 HTML 画布元素上。如果您愿意，画布元素可以是不可见的。
保存后，您将遵循以下答案：
如何在服务器上将 HTML5 Canvas 保存为图像 https://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server
将其保存到服务器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
