jQuery 如何裁剪图像的任何选定区域并将其保存到服务器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17772169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to crop any selected area of an image and save it to the server?
提问by bbb
Let me summarize the scenario with a picture:
让我用一张图片总结一下这个场景：
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.
我正在尝试在我的网站中创建一个设置个人资料图片的功能。我想要一个页面来在图像字段中以原始大小显示上传的图像，但个人资料图片的大小应该是 200*153 所以我想要那个用户可以调整图片大小，也可以将一个框架（框架大小为 200*153）拖到他们想要成为他们的个人资料图片的调整大小图片的任何区域，当他们点击保存按钮时，只是在该区域帧被裁剪并将该区域保存到服务器。
Imagine that these are the HTML codes:
想象一下，这些是 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"/>
Note that the div is draggable and the image is resizeable.
请注意，div 是可拖动的，图像是可调整大小的。
Thank you.
谢谢你。
采纳答案by Paarth
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 定位在同一个包装 div 中。我会这样做是因为它可以让您更轻松地在 div 上而不是图像上使用 jquery 的坐标函数。
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:
获得这些坐标后，您可以截取由 div 的尺寸和坐标指定的该图像的裁剪部分，并使用本教程：
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
To save that section onto an HTML canvas element. The canvas element can be invisible if you like.
将该部分保存到 HTML 画布元素上。如果您愿意，画布元素可以不可见。
Once that is saved, you follow this answer:
保存后，您可以按照以下答案进行操作：
How to save a HTML5 Canvas as Image on a server
to save it to the server.
将其保存到服务器。
回答by Or Duan
Ok, First of all you have to use server side language to actually save the cropped image image. I would use Jcropfor the cropping, and then send it to the server for the saving process.
好的，首先您必须使用服务器端语言来实际保存裁剪后的图像图像。我会使用Jcrop进行裁剪，然后将其发送到服务器进行保存过程。
Again, you CAN'T save files on the server with javascript only!
同样，您不能仅使用 javascript 在服务器上保存文件！
回答by Or Duan
You can use this php class to mask an image with a maskingimage of size 200*153. It will exactly crop the exact area using pixel based alpa channel mapping. Wherever the mask image has the alpha Channel 0( Transparent Part ), it will crop by grabbing the pixels of that area and will regenerate the image to the new required size in your case. You will have to keep a mask image of size 200*153 pixel in your server to be used. Here you can also pass the new resized coordinates by ajax calls to backend and crop image accordingly.
您可以使用这个 php 类来使用大小为 200*153 的 maskingimage 来屏蔽图像。它将使用基于像素的 alpa 通道映射精确裁剪确切区域。只要遮罩图像具有 alpha 通道 0（透明部分），它将通过抓取该区域的像素进行裁剪，并将图像重新生成为您的情况下所需的新尺寸。您必须在服务器中保留大小为 200*153 像素的蒙版图像才能使用。在这里，您还可以通过 ajax 调用将新调整大小的坐标传递给后端并相应地裁剪图像。
https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php
https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php
If you have option to go with server side script it will work. The above link is a proof of concept for the same.
如果您可以选择使用服务器端脚本，它将起作用。上面的链接是相同的概念证明。
回答by Martijn
I believe this is almost exactly what you are looking for: jQuery jCrop
我相信这几乎正是您正在寻找的： jQuery jCrop
Only, instead of saving the file, output it on the screen with a 'forced download' header
只有，而不是保存文件，将其输出到带有“强制下载”标题的屏幕上
