使用JS和PHP裁剪和旋转图像 [英] Crop and rotate images with JS and PHP
问题描述
谷歌搜索工具几天后，除了 Kroppr 之外，我什么也没找到，但是没有我可以承诺使用在部署之前无法在本地测试的工具。
Having been Googling for a tool for a few days, I have found nothing apart from Kroppr but there's no way I can commit to using a tool that can't be tested locally before deployment.
我需要的是能够为用户提供裁剪和旋转功能的设施一个图像，让服务器保存它，覆盖原始图像。似乎有很多裁剪工具，但没有什么可以旋转。
All I need is something that can provide the facility for a user to crop and rotate an image, and have the server save it, overriding the original image. There seems to be plenty of cropping tools out there but nothing that can rotate as well.
是否有这样的工具？
推荐答案
没有人回答这个呢？嗯，我认为你很难找到一个能完全符合你喜欢的工具。我想你正在寻找类似于Kroppr的东西，但不是与服务有关。
No one has answered this yet? Hmmm well I think you are going to have a hard time finding a tool that does exactly what you like. I imagine you are looking for something similar to Kroppr, but not tied to a service.
所以这里有一些资源你可以用来构建一个！
So here are some resources you can use to build one!
http://code.google.com/p/jqueryrotate/
这两个看起来都非常可靠，可让您旋转图像。
Both of these look like pretty solid libraries that will let you rotate an image.
在与裁剪者合作。显示图像的样子。
Use this in conjunction with a cropper. To display what the image will look like.
现在这里是偷偷摸摸的部分。您只需要跟踪2件事。
Now here is the sneaky part. You only need to keep track of 2 things.
1）选定的旋转角度0-360
1)The selected angle of rotation 0-360
2）裁剪的x1，y1，x2，y2。
2)The x1, y1, x2, y2 of the crop.
收集到这些数据后，调用服务器上的php脚本并将其传递给图像处理的值（角度，x1，y1，x2，y2）这可以通过ajax，表单提交通过POST完成，或者你甚至可以使用GET直接将它们作为变量发送到URL中
Once you have collected this data, make a call to a php script on your server and pass it the values of the image manipulation (angle, x1, y1, x2, y2) This can be done through a POST via ajax, form submission, or you can even use a GET and just directly send them as variables in the URL
现在使用GD进行PHP中的所有图像处理。
Now do all of the image manipulation in PHP using GD.
<?php
//Incoming infomation. This should be set by $_GET[] or $_POST[] rather than the hardcoded examples.
$x1 = 100;
$y1 = 100;
$x2 = 400;
$y2 = 400;
$degrees = 47;
$filename = 'images/ducks.jpeg';
//find the original image size
$image_info = getimagesize($filename);
$original_width = $image_info[0];
$original_height = $image_info[1];
//calculat what the new image size should be.
$new_width = abs($x2 - $x1);
$new_height = abs($y2 - $y1);
$image_source = imagecreatefromjpeg($filename);
//rotate
$rotate = imagerotate($image_source, $degrees, 0);
//rotating an image changes the height and width of the image.
//find the new height and width so we can properly compensate when cropping.
$rotated_width = imagesx($rotate);
$rotated_height = imagesy($rotate);
//diff between rotated width & height and original width & height
//the rotated version should always be greater than or equal to the original size.
$dx = $rotated_width - $original_width;
$dy = $rotated_height - $original_width;
$crop_x = $dx/2 + $x1;
$crop_y = $dy/2 + $y1;
$new_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($new_image, $rotate, 0, 0, $crop_x, $crop_y, $new_width, $new_height, $new_width, $new_height);
//save over the old image.
imagejpeg($new_image, $filename);
?>
这只是一个快速而又肮脏的例子。如果你想让它适用于jpeg以外的图像类型，你需要做一些检查并使用GD的其他方法来处理.pngs或.gifs。旋转和裁剪代码将保持不变。
This is just a quick and dirty example for you to work off of. If you want this to work for image types other than jpeg you will need to do some checking and use the other methods of GD for handling .pngs or .gifs. The rotation and cropping code will remain the same.
大部分修补左边现在都在前端，我将由你决定。你需要捕获的只是一个旋转角度和x，y裁剪点。
The majority of tinkering left is now in the front-end, I will leave that up to you to decide. All you need to capture is a rotation angle and the x,y cropping points.
希望这很有帮助。如果你需要更多关于前端的帮助，请告诉我。
Hopefully this was helpful. If you need more help on the front-end stuff let me know.
p.s。我会发布更多资源链接，但显然我只允许发布2，因为我的声誉还不够高。
p.s. I would post more links to resources, but apparently I am only allowed to post 2 because my reputation is not high enough yet.
这篇关于使用JS和PHP裁剪和旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
