26 декабря 2008 г. GD AJAX ImageMagick jQuery PHP

ImageCrop с помощью jQuery, плагина imgAreaSelect и PHP GD

Попросил меня человек с ПыхаФорума помочь с библиотекой для визуального выделения объекта на картинке с последующем обрезом этого объекта, то есть "Crop" как говорится! :-)

Фронтенд часть я реализовал при помощи jQuery плагина - imgAreaSelect и соответственно не без помощи библиотеки jQuery. Что заняло у меня минут 10-15, так как я с этим плагином уже работал и успешно применял на проекте Moskva.RU

Бекенд часть решил сделать на PHP GD, хотя сначала хотел на PHP iMagick, однако в силу того, что библиотека imagick на хостингах часто не установлена - решил не рисковать.

Как это выглядит

93592015621

http://demo.adw0rd.ru/imgcrop/

Итак, перейдем к реализации

Качаем и подключаем imgAreaSelect, а также jQuery.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ImgCrop</title>
    <link rel="stylesheet" href="./styles/screen.css" type="text/css" media="screen" />
    <script type="text/javascript" src="./scripts/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="./scripts/jquery.imgareaselect-0.6.1.js"></script>
    <script type="text/javascript" src="./scripts/imgareaselect.js"></script>

</head>
<body>
    <div id="page">
        <div id="workspace">
            <img style="float: left; margin-right: 10px;" src="ladybug_ant.jpg" id="image"/>
        </div>
        <br style="clear:both" />
        <div id="result"><img src="./images/ajax-loader.gif" alt="ajax" /></div>

    </div>
</body>
</html>

Теперь посмотрим на реализацию фронтенд части:

function imgCrop(img, selection)
    {
        // загрузка...
        $('#result')
        .html('<img src="./images/ajax-loader.gif" alt="ajax" />')
        .css({display: "block"});

        // отправляем данные бэкенду
        $.post(
        './backend/index.php',
        {
            w: selection.width,
            h: selection.height,
            x: selection.x1,
            y: selection.y1,
            i: $('#workspace > img').attr('src')
        },
        function(txt){
            $('#result').html(txt);
        },
        'text'
        );
    }

    // Сначала инициализируем плагин imgAreaSelect и передаем параметры
    $(window).load(function () {
        $('#image').imgAreaSelect({
            movable: true,
            resizable: true,
            onSelectEnd: imgCrop // после выделения объекта срабатывает ф-ия imgCrop()
        });
    });

Реализацию бэкенда не стал выкладывать, так как в этой статье это не так важно, кому надо, тот посмотрит в каталог /backend/ и найдет то что ищет... ;)

P.S. не забудьте указать права на запись файлу tmp.jpeg :)

Для простой версии:

Демка http://demo.adw0rd.ru/imgcrop/ (БОЛЬШЕ НЕ СУЩЕСТВУЕТ)

Сырцы http://adw0rd.com/files/imgcrop.zip

Для расширенной версии:

Демка http://demo.adw0rd.ru/imgcropext/ (БОЛЬШЕ НЕ СУЩЕСТВУЕТ)

Сырцы http://adw0rd.com/files/imgcropext.zip

Комментарии

adw0rd 26 декабря 2008 г. 11:36

Кстати, данный плагин использует сервис Gravatar.com ;-)

vasa_c 27 декабря 2008 г. 19:49

Кто кого использует?

adw0rd 28 декабря 2008 г. 1:14

Ссорь, Граватар использует - плагин :-)

epsyl 6 июля 2009 г. 9:15

еще бы при удерживаемом шифте — делать квадратное выделение
и при нажатом пробеле можно было перемещать выделение...
:)

adw0rd 6 июля 2009 г. 13:50

epsyl, хитрец!) напиши :)

BUDD\ 6 декабря 2009 г. 14:44

а как можно сделать область выделения заданого размера? вот нужно, чтоб при выборе горизонтальной фотки она обрезалась до вертикальной 250х350

adw0rd 7 декабря 2009 г. 9:52

http://odyniec.net/projects/imgareaselect/usage.html тут посмотрите, особенно: maxHeight, maxWidth, minHeight, minWidth, resizable, aspectRatio.

As-is 17 мая 2010 г. 18:16

Сообщение с опозданием - несмотря на 1.5 годичное отсутствие сообщений:
Работает прекрасно,- особенно с большими изображениями.
Но при этом и появляется проблема-изображение не масштабируется
и "закрывает" весь экран.
Можно ли масштабировать исходное изображение - именно масштабировать (Не ресайзинг).
Скрипт иллюстративный. Было бы не плохо иметь возможность загружать изображение, давать ему имя при загрузке на сервер,
а кроп-изображение сохранять с именем "имя первоначально+кроп".расширение файла.
Спасибо, познавательно.

Рома 30 мая 2012 г. 12:28

А что-то демки хреново совсем работают, причем обе. В первой нижнее изображение вообще не меняется, во второй кропит хреново

adw0rd 30 мая 2012 г. 13:55

Да, что-то демки поломались, видимо трабл с библиотеками, сейчас посмотрю

adw0rd 30 мая 2012 г. 15:02

Пофиксил

Алмаз 11 марта 2013 г. 19:46

То что искал, но увы ни демка ни сырцы не доступны(( Мой майл alterego.kam@mail.ru

adw0rd 12 марта 2013 г. 9:35

Демок больше нет, так как php я удалил с сервера. Ссылки на сорцы пофиксил в статье

Юля 30 марта 2015 г. 20:36

Здравствуйте, умные люди!)))) я немного знаю HTML и CSS, а мне нужно реализовать вот что: сервис фоторамок, т.е. фотография загружается в фоторамку которая уже есть на сайте, и потом пользователь может их сохранить себе на комп. (значит нужно загрузить, возможно изменить размер своего фото (допустим обрезка как в этом примере, наложить одно изображение на другое, "слить" в одно изображение, ну и дать возможность его скачать в этом виде). Как это можно реализовать, хотя бы в каком направлении продолжить изучение материала, а то стока всего!

GTAlex.ru 29 октября 2015 г. 5:58

Сырцы не доступны :(

Оставьте свой комментарий

Markdown