如何裁剪图像的任何选定区域并将其保存到服务器？
bbb
让我用图片来总结场景：
我正在尝试在网站中设置个人资料图片的功能。我想要一个页面，以在图片字段中以原始尺寸显示上传的图片，但个人资料图片的尺寸应为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元素上。如果愿意，canvas元素可以是不可见的。
保存后，您将遵循以下答案：
将其保存到服务器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用 Powershell 从 Azure 存储下载 blob 文件并将其保存到 FTP 服务器？
- 2
如何从服务器获取多个图像并将其保存并显示在iPhone应用程序中？
- 3
将图像上传到服务器并将URL保存到服务器
- 4
extjs-更改属性网格中的设置并将其保存到服务器
- 5
Fileupload到服务器并将其ID作为guid保存到数据库
- 6
将图像保存到服务器
- 7
C＃MVC网站-将画布保存到服务器上的图像文件-图像被裁剪
- 8
是否可以从HTML5的本地存储中提取数据并将其保存到服务器数据库？
- 9
如何从最近选择任何文件并将其上传到服务器？
- 10
我如何编程我的软件以将其数据保存到特定服务器？
- 11
如何从快速后端服务器获取图像并将其显示到 React js 前端？
- 12
如何从服务器中检索值并将其保存在sqlite中并立即显示？
- 13
流星将图像数据保存到服务器集合
- 14
将画布图像保存到服务器
- 15
从在线打开图像，保存到服务器烧瓶
- 16
在ImageView中旋转图像并保存到服务器
- 17
Android将图像保存到PHP服务器
- 18
将图像保存到远程服务器
- 19
将画布中上传的图像保存到服务器
- 20
是否可以在ASP.NET中上载和显示图像而无需实际将其保存到服务器？
- 21
如何将图像从网站保存到另一台服务器
- 22
如何从图库中获取图像，裁剪图像并将其保存在应用程序中
- 23
如何使用base 64对图像进行编码并将其使用android中的翻新2将其发布到服务器
- 24
从客户端接收二进制图像并将其保存在服务器端
- 25
如何获取选定选项的值并将其保存到变量中？（Javascript）
- 26
将图像从客户端上传到 NodeJS 服务器并将其内部保存在服务器上？
- 27
通过在线文本编辑器创建PDF文件，并将其直接保存到Web服务器文件系统ASP.NET MVC
- 28
如何获取 JWT 并将其传递到服务器？
- 29
如何获得2张图像之间的差异并将其保存到图像
我来说两句