用js + php实时图像裁剪

I'd like to have ability to resize pictures on my site. Algorithm:

我希望能够在我的网站上调整图片大小。算法:

You upload an image to site. (grey)

您将图像上传到网站。 (灰色)

That image appears in orange part.

该图像以橙色部分显示。

Red part - is a rectangular, with help of which we can choose which part of image to show in preview_zone.

红色部分 - 是一个矩形,借助它我们可以选择在preview_zone中显示哪个部分的图像。

After I choose right zone, I press OK and data(resize zone) uploads to server.

选择正确的区域后,按OK,数据(调整大小区域)上传到服务器。

Server crops image with PHP.

服务器使用PHP裁剪图像。

Maybe you could find any articles, how to do it, or sites with such api. Or do it by yourselves. I would be very gratefule for your help.

也许你可以找到任何文章,如何做到这一点,或者有这样的api的网站。或者自己做。我非常感谢你的帮助。

1 个解决方案

#1

You should check out JCrop jQuery image cropping plugin:

你应该看看JCrop jQuery图像裁剪插件:

http://deepliquid.com/content/Jcrop.html

Repo: https://github.com/tapmodo/Jcrop https://github.com/tapmodo/Jcrop/tree/master/demos

回复:https://github.com/tapmodo/Jcrop https://github.com/tapmodo/Jcrop/tree/master/demos

Examples: http://deepliquid.com/projects/Jcrop/demos.php

One of the demos seems to match your requirement. (http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop) You can make small modifications to get your desired output.

其中一个演示似乎符合您的要求。 (http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop)您可以进行少量修改以获得所需的输出。

#1