Форуми / National / Russian / Тех. поддержка / Передать свойства изображения из jquery в php

Kopusha
#1 16.04.2020 19:11

Пробую сделать средствами jquery обрезку изображения экстраполя input file. К клиентской частью все просто - поставил что то типа imgareaselect.js и все работает - создается base64 превьюшка и кропиться. Но при загрузке координаты созданные js не играют никакой роли, надо его обрезать фактически средствами php. 

<?php
 
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
 
$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);
 
header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);
 
?>

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

Спасибо!

jCube Group
#2 18.04.2020 19:18

Проще всего сделать загрузку через ajax,  если хотите для начало во временную папку,  а после сохранения перенести,  а можно сразу в нужную папку.

У меня это так:

$('[data-setCrop]').click(function () {
                canvas.cropper('getCroppedCanvas').toBlob(function (blob) {
                   var fd = new FormData();
                   fd.append('inpname', blob, file.name);
                   fd.append("uid", $('[name="userid"]').val());
                   fd.append("x", $('[name="x"]').val());
 
                    $.ajax({
                        url: '/index.php?r=pluginname&a=upload',
                        data: fd,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function (data) {
                            data = JSON.parse(data);
                            data.forEach(el =>{
                               // some code
                                console.log(el);
                            });
                        }
                    });
 
                   $("#cropperContent").html('');
                   UIkit.modal("#croper").hide();
               });
           });

Таким образом я отправляю на сервер уже обрезанную картинку

Сделал группу в телеге https://t.me/Cotonti_help если что помогу с вопросами.
Kopusha
#3 19.04.2020 17:47

Спс, попробую. поподробнее куда это все ставить)
К примеру для page создано поле file (input name= rpagefile) куда льется картинка, ее выводить и кропить на html умею. В rpagefile отдать - вот тут бы поподробннее, спасиб

jCube Group
#4 21.04.2020 06:10

Я вам дал пример JS, его можно в фаил, а чтоб загрузить нужно сделать ajax hook в каком-то плагине (лучше созать свой). 

Сделал группу в телеге https://t.me/Cotonti_help если что помогу с вопросами.