Обрезать и вращать изображения с помощью JS и PHP - PullRequest
3 голосов
/ 17 октября 2011

После нескольких дней поиска в Google инструмента я ничего не нашел, кроме Kroppr , но я не могу взять на себя обязательство использовать инструмент, который нельзя протестировать локально перед развертыванием.

Все, что мне нужно, это что-то, что может предоставить пользователю возможность обрезать и поворачивать изображение, и сервер сохранит его, переопределив исходное изображение.Кажется, что есть много инструментов для обрезки, но нет ничего, что могло бы вращаться.

Есть ли такой инструмент?

Ответы [ 3 ]

7 голосов
/ 17 октября 2011

Никто еще не ответил на это?Хммм, хорошо, я думаю, вам будет трудно найти инструмент, который делает именно то, что вам нравится.Я полагаю, вы ищете что-то похожее на Kroppr, но не привязанное к сервису.

Итак, вот некоторые ресурсы, которые вы можете использовать для создания одного!

http://code.google.com/p/jqueryrotate/

http://raphaeljs.com/

Обе они выглядят как довольно солидные библиотеки, которые позволяют вращать изображение.

Используйте это вместе с кадрирующим устройством.Чтобы отобразить, как будет выглядеть изображение.

Теперь вот подлая часть.Вам нужно только отслеживать 2 вещи.

1) Выбранный угол поворота 0-360

2) x1, y1, x2, y2 обрезки.

Как только вы соберете эти данные, сделайте вызов php-скрипта на вашем сервере и передайте ему значения манипуляции с изображениями (angle, x1, y1, x2, y2). Это можно сделать через POST через ajax, формуили вы можете даже использовать GET и просто напрямую отправлять их как переменные в URL

Теперь выполните все манипуляции с изображениями в PHP с помощью 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.Код поворота и обрезки останется прежним.

Большинство оставшихся мастеров теперь в переднем крае, я оставлю это на ваше усмотрение.Все, что вам нужно для захвата, это угол поворота и точки обрезки x, y.

Надеюсь, это было полезно.Если вам нужна дополнительная помощь по работе с интерфейсом, дайте мне знать.

ps Я бы опубликовал больше ссылок на ресурсы, но, очевидно, мне разрешено публиковать только 2, потому что моя репутация пока недостаточно высока.

1 голос
/ 31 июля 2015

Я также нашел другой способ обрезать изображения с помощью javascript и иметь сервер для осуществления изменений. пожалуйста, проверьте этот проект на git .Я все еще тестирую его, однако, скоро я предоставлю некоторые фрагменты кода, когда я получу это идеально. Изображение Кроппер

1 голос
/ 17 октября 2011

Ответ выше действительно хорош, но вы можете взглянуть на

http://phpthumb.sourceforge.net/ - Для обрезки

http://code.google.com/p/jqueryrotate/ - jQuery rotate (опубликовано выше))

Эти два сработали хорошо во всех моих проектах

...