Tickets: resize и upload изображения в tv с фронта
Добрый день!
Подскажите пожалуйста.
На frontend есть форма для создания тикета.
Через поле image-log (TV — изображение) загружается картинка на сервер и записывается путь до неё в tv.
Или смотрел в сторону cropit, но здесь как правильно передать в input и конвертировать base64 в картинку в рамках этого сниппета.
Спасибо
Подскажите пожалуйста.
На 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 в картинку в рамках этого сниппета.
Спасибо
Комментарии: 1
Прикрутил к tpl.Tickets.form.create cropit
Собственно:
Возникла ожидаемая проблема картинка передается в base64, возник вопрос как в рамках данного плагина декодировать bas64 в картинку -> ее загрузка в директорию и запись в tv в бд
Нашел для 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». Но куда дальше смотреть не знаю.Может кто помочь?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.