Crop (обрезка) аватара пользователя

1401

Если перед вами когда-либо стояла задача «Сделать crop изображений на сайте», то вы попали по адресу. Сегодня покажем практический кейс, как можно быстро подключить скрипт для кропа (обрезки) фото на примере кропа аватарки пользователя сайта.

Итак, суть нашей задачи состояла в том, что нужно было реализовать красивые круглые аватарки пользователей на сайте, но как вы понимаете, одинаково правильно их центрировать в круг все равно не получится, так как люди могут загружать фото разного формата. Поэтому мы решили поставить на сайт скрипт кроппинга фото, который позволит пользователю при загрузке своего фото выбрать именно ту область, которая ему нужна и именно в круглом формате.

Немного поискав в интернете информацию, мы натолкнулись на скрипт под названием Croppie. Он показался нам довольно простым в использовании и, что самое важное, довольно универсальным. Так как он может работать как с JQuery, так и без него. Примеры того, что умеет скрипт, вы сможете посмотреть на Github.

Как подключить crop пользовательских изображений на WordPress CMS

Для начала вам необходимо будет скачать саму библиотеку и загрузить к себе на сайт, в нужную вам директорию. Для примера, у нас располагается по такому пути:

Далее подключим скрипт в файле functions.php нужной темы.

Учитывая, что мы у себя используем свой WPS Framework, наше подключение скрипта выглядит следующим образом:

/*croppie*/
        wp_register_script('croppie-js', ABS_ASSETS_URI . '/libs/croppie/croppie.min.js', array('jquery'), '1.0.0', true);
        wp_register_style('croppie-css', ABS_ASSETS_URI . '/libs/croppie/croppie.css', array(), '1.0.0', null);

После того, как скрипт подключен, нужно сделать правильную HTML разметку на странице. В нашем случае разметка располагается в личном кабинете пользователя. Разметка будет выглядеть следующим образом:

<div class="user_page__user_info__photo">
	<div class="user_page__user_info__photo__holder">
		<label><input type="file" id="upload" name="up_image" accept="image/*" value=""></label>
		<?php if (isset($user->user_avatar) && !empty($user->user_avatar)) : ?>
			<?php echo wp_get_attachment_image($user->user_avatar) ?>
		<?php else: ?>
			<img src="" alt="">
		<?php endif; ?>
	</div>

	<input type="hidden" name="user_image" value="<?php echo $user->user_avatar ?>">
	<input type="hidden" class="fn_delete_avatar" name="delete_avatar" value="0">
	<input type="hidden" class="fn_user_avatar" name="user_avatar" value="">

	<div class="upload-demo-wrap fn_resize_canvas" style="display: none;">
	<button type="button" class="upload-result fn__user_photo__check_result"></button>
		<div id="upload-demo"></div>
	</div>
</div>

После этого выполним инициализацию самого скрипта на нашу верстку. Для этого пропишем следующий JS код:

Давайте посмотрим на внешний вид этого функционала.

Внешний вид вы можете придать какой угодно. Все необходимые кнопки уже есть в разметке, а верстка может быть в любом удобном для вас виде.

Теперь, когда мы разобрались с фронт частью, давайте заглянем «под капот» и посмотрим, что же происходит после обрезки фото и как это сохраняется в базу данных.

Функционал изнутри

Начнем с формата данных, в котором обрезанное фото передается на сервер.

Если проинспектировать код, то будет видно, что после обрезки готовое фото помещается в тег <input> в формате base64

И, соответственно, изображение передается уже в формате строки на ваш сервер.

Теперь посмотрим на серверную сторону обработки фото.

    if(isset($_POST['save_user']) && $_POST['save_user'] == 'save_user') {

    $filename = strip_tags($_POST['user_email'].rand(1000,9000).'.png');

    if(isset($_POST['delete_avatar']) && $_POST['delete_avatar'] == 1 && !empty($_POST['user_image'])) {
        wp_delete_attachment( intval($_POST['user_image']), false );
        update_post_meta($_SESSION['user_id'],'user_avatar','' );
    }
    if(isset($_POST['user_avatar'])){
        $data = $_POST['user_avatar'];

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

        $wordpress_upload_dir = wp_upload_dir();
        $new_file_path = $wordpress_upload_dir['path'] . '/'.$filename;
        $new_file_mime = 'image/png';
        if( file_put_contents( $new_file_path, $data ) ) {
            $upload_id = wp_insert_attachment( array(
                'guid'           => $new_file_path,
                'post_mime_type' => $new_file_mime,
                'post_title'     => preg_replace( '/\.[^.]+$/', '', $filename ),
                'post_content'   => '',
                'post_status'    => 'inherit',
            ), $new_file_path );
            // wp_generate_attachment_metadata() won't work if you do not include this file
            require_once( ABSPATH . 'wp-admin/includes/image.php' );
            // Generate and save the attachment metas into the database
            wp_update_attachment_metadata( $upload_id, wp_generate_attachment_metadata( $upload_id, $new_file_path ) );
            update_post_meta($_SESSION['user_id'],'user_avatar',intval($upload_id) );
        }
    }
}

Собственно, в данном коде ничего принципиально нового нет, но самое полезное, что вы можете отсюда взять это:

обработка фото в видео base64 строки;
правильная загрузка фото в медиагалерею WordPress.

Посмотрим более детально на обработку самого фото:

Плюс данного скрипта в том, что он, по факту, всегда вам дает изображение в формате png, что позволяет хранить все фото в одном формате и обрабатывать все фото одинаково. Кроме того, благодаря самостоятельной генерации названий фото, вы сможете максимально гибко и уникально именовать картинки и полностью исключить одинаковые названия.

Теперь посмотрим на механизм загрузки фото в медиагалерею WordPress.

Данная часть скрипта является универсальной, и вы можете использовать её во всех случаях, когда нужно правильно прикрепить фото к типу записи в системе.

Важно! Не забывайте удалять старый аватар пользователя перед загрузкой нового, так как здесь есть потенциальная опасность быстрой потери свободного места на диске.

Для наглядного понимания, как это работает на фронт части, посмотрите пример ниже. Применяйте, создавайте новое и развивайтесь 😉