Tickets: resize и upload изображения в tv с фронта

Добрый день!
Подскажите пожалуйста.

На frontend есть форма для создания тикета.
Через поле image-log (TV — изображение) загружается картинка на сервер и записывается путь до неё в tv.
<div class="form-group">
	<label for="ticket-photo">Изображение</label>
	<input type="file" name="image-log" class="form-control" id="ticketphoto"/>
	<span class="error" id="error_ticketphoto"></span>
</div>
Решение загрузки и записи было найдено здесь https://modx.pro/help/6467/ и осуществляется с помощью плагина на событие OnDocFormSave.

<?php
if ($modx->event->name == 'OnDocFormSave') {
      if($mode == 'new'){  
        if (!empty($_FILES)) { 
            
            $id = $resource->get('id');
            $folder = 'images/log'; // имя папки куда грузить, должна быть создана (в корне сайта)
            $path = MODX_BASE_PATH.'/'.$folder.'/'; // Путь от корня до нужного места
            $tv_name = 'image-logo-project'; // имя тв

            // все значения файла
            $nameFile = $_FILES['image-logo-project']['name'];
            $typeFile = $_FILES['image-logo-project']['type'];
            $tmpNameFile = $_FILES['image-logo-project']['tmp_name'];
            $sizeFile = $_FILES['image-logo-project']['size']; 
             
            $limit_size = 3*1024*1024; // 3 Mb - максимальный размер загружаемого файла
            $file_types = array("jpeg", "jpg", "png"); // доступные расширения для загрузки
            $extensionFile = pathinfo($nameFile, PATHINFO_EXTENSION);
            $NewNameFile = 'project_'.$id.'_'.date("m_d_y").'.'.$extensionFile;  // наше новое имя файла
             
            if(is_uploaded_file($tmpNameFile)) // проверяем зашёл ли файл
            {
                if($limit_size > $sizeFile)
                { // Проверка на размер
                    if(in_array($extensionFile, $file_types)){ // проверка на тип
                         move_uploaded_file($tmpNameFile, $path.$NewNameFile); // загрузка файла
                         $resource->setTVValue($tv_name, $folder.'/'.$NewNameFile); // запись в ТВ
                    }
                }
            }
        }
    } 
}
Пробовал добавить уменьшение и обрезку, но ничего не получилось поскольку в php не силен. Может кто помочь, что нужно дописать, чтобы кроме загрузки и записи в tv, изображение можно было уменьшить и обрезать при необходимости.
Или смотрел в сторону cropit, но здесь как правильно передать в input и конвертировать base64 в картинку в рамках этого сниппета.
Спасибо
Roman
Roman
24 января 2017, 01:45
modx.pro
1
1 508
0

Комментарии: 1

Roman
Roman
02 февраля 2017, 01:17
+1
Прикрутил к tpl.Tickets.form.create cropit
Собственно: 
<script>
      $(function() {
        $('.image-editor').cropit();
        $('form').submit(function() {
          // Move cropped image data to hidden input
          var imageData = $('.image-editor').cropit('export',{
                type: 'image/jpeg',
                quality: .6
            });
          $('.image-logo').val(imageData);
        });
      });
 </script>	

<div class="image-editor">
        <input type="file" class="cropit-image-input">
        <div class="cropit-preview"></div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-logo-project" class="image-logo" id="ticketphoto"/>
</div>
Теперь в 
<input type="hidden" name="image-logo-project" class="image-logo" id="ticketphoto"/>
передается картинка, которая в теории должна обрабатываться плагином, описанным выше на OnDocFormSave
Возникла ожидаемая проблема картинка передается в base64, возник вопрос как в рамках данного плагина декодировать bas64 в картинку -> ее загрузка в директорию и запись в tv в бд
Нашел для cropit обработку:
<?php 
	define('UPLOAD_DIR', 'images/');
	$img = $_POST['image-data'];
	$img = str_replace('data:image/png;base64,', '', $img);
	$img = str_replace(' ', '+', $img);
	$data = base64_decode($img);
	$file = UPLOAD_DIR . uniqid() . '.png';
	$success = file_put_contents($file, $data);
	echo $file;
?>
и
$img = $_POST['img'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$year = time();
$img = file_put_contents('../img/'.$year.'.jpg', base64_decode($img));
$result = mysqli_query ($link, "INSERT INTO test (img) VALUES ('$year');");
echo $result;
Поскольку практически не знаком в php, получилось
<?php
if ($modx->event->name == 'OnDocFormSave') {
      if($mode == 'new'){  
        if (!empty($_POST)) { 
            $id = $resource->get('id');
            $folder = 'images/logo'; // имя папки куда грузить, должна быть создана (в корне сайта)
            $path = MODX_BASE_PATH.'/'.$folder.'/'; // Путь от корня до нужного места
            $tv_name = 'image-logo-project'; // имя тв
            
            $NewNameFile = 'id_'.$id.'_'.date("m_d_y"); // новое имя файла

            $img = str_replace('data:image/jpeg;base64,', '', $tv_name);
	    $img = str_replace(' ', '+', $img);
            $imgnew = file_put_contents($folder.'/'.$NewNameFile.'.jpg', base64_decode($img));
            
            $resource->setTVValue($tv_name, $folder.'/'.$NewNameFile.'.jpg'); // запись в tv
        }
    } 
}
Разумеется в tv в бд записывается «images/logo/id_1_02_01_17.jpg». Но куда дальше смотреть не знаю.
Может кто помочь?
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1