如何裁剪图像的任何选定区域并将其保存到服务器? [英] How to crop any selected area of an image and save it to the server?

问题描述

让我用图片总结一下情况:

Let me summarize the scenario with a picture:

我正在尝试在网站中设置个人资料图片的功能.我希望有一个页面以原始尺寸在图片字段中显示上传的图片，但个人资料图片的尺寸应为200 * 153，因此我希望用户可以调整图片大小，也可以将框架(框架大小为200 * 153)拖动到调整后的图片中要用作个人资料图片的任何区域，并且单击保存按钮时，在框架中进行裁剪，然后将该区域保存到服务器.

I am trying to make a feature for setting profile pictures in my site.I want to have a page to show the uploaded image in its original size in an image field but the size of the profile picture should be 200*153 so I want that the users can resize the picure and also drag a frame(the frame size is 200*153) to any area of the resized picture that they want to be their profile picture and when they click on the save button just the area that is in the frame be croped and save that area to the server.

想象一下，这些是HTML代码:

Imagine that these are the HTML codes:

<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是可拖动的，图像是可调整大小的.

Note that the div is draggable and the image is resizeable.

谢谢.

推荐答案

您将首先将图像和div放在同一包装div中.我之所以这样做，是因为它可以让您在div而不是图像上更轻松地在div上使用jquery的坐标函数.

You would begin by positioning the image and the div in the same wrapper div. I would do this because it will allow you to use jquery's coordinate functions on the div more easily rather than the image.

一旦有了这些坐标，就可以获取由div的尺寸和坐标指定的那幅图像的裁剪部分，并使用本教程:

Once you have those coordinates, you can take a cropped section of that image specified by the div's dimensions and coordinates and use this tutorial:

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

将该部分保存到HTML canvas元素上.如果愿意，canvas元素可以不可见.

To save that section onto an HTML canvas element. The canvas element can be invisible if you like.

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

Once that is saved, you follow this answer:

如何将HTML5 Canvas另存为服务器上的图片

将其保存到服务器.

这篇关于如何裁剪图像的任何选定区域并将其保存到服务器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！