1

Подскажите, перерыл пол гугла, нечего не походит, может быть не так понимаю. Задача такая: Есть картинки разных размеров где то около 2000x***-5000x**** px в ширину, а мне требуется выделить фиксированный блок например на 1600x350px, выбрать курсором место сверху слева или даже уменьшить или приблизить, но строго чтобы не вылезло за рамки изображения. И все это делать в блоке допустим на 800px шириной (т.е. данный кроппинг ужать и чтоб не повлияло на пиксели при результате). Можно чтоб скрипт js выдавал высчитанные координаты, а дальше я в PHP по ним отрезал. Проблема именно в том что в основном все кропинги которые встречал работают с не большими изображениями, в общем не то на выходе получается.

1 ответ 1

1

В общем как это всегда бывает сам допер) Приложу полный код, если кто столкнется, пусть для себя чего-нибудь да почерпнут. Единственное замечу чтоб понятно было что в коде, в моем случае мне нужно 1600 на 350 px и блок в котором изображение редактировалось размером в 800 на 175, т.е. я те величины нужные мне разделил на 2. Получив удовлетворяющие меня значения не испортив результативных пропорций, другие пропорции можно решить вроде с помощью ратио и не много математики (но это уже вам на десерт, а моя задача выполнена).

<?php
if(isset($_POST['cropping'])){
    if($_POST['cropping']==1){
        //  Кропаем
        $x = $_POST['x'];
        $y = $_POST['y'];
        $w = $_POST['w'];
        $h = $_POST['h'];
        $imageIn = imagecreatefromjpeg($_FILES['image']['tmp_name']);
        $imageCrop = imagecreatetruecolor($w,$h);
        imageCopy($imageCrop,$imageIn,0,0,$x,$y,$w,$h);
        $imageOut  = imagecreatetruecolor(1600,350);
        imagecopyresampled($imageOut,$imageCrop,0,0,0,0,1600,350,$w,$h);
        imagejpeg($imageOut,'out.jpg',75);
        imagedestroy($imageOut);
    }else{
        //  Уменьшаем только качество, чтоб не весила 100500 мегабайт ))
        $imageIn = imagecreatefromjpeg($_FILES['image']['tmp_name']);
        imagejpeg($imageIn,'out.jpg',75);
        imagedestroy($imageIn);
    }
}
?><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cropbox.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.js"></script>
</head>
<body>
    <img id="cropImage" src="" />
    <br>
    <input type="file" id="selectFile" accept=".jpeg,.jpg" />
    <br>
    <button onclick="send();">send</button>
    <script type="text/javascript" defer>
        function send(crop = 1){
            var data = new FormData();
            data.append('cropping',crop);
            if(crop==1){
                data.append('x',$('body').data('cropX'));
                data.append('y',$('body').data('cropY'));
                data.append('w',$('body').data('cropW'));
                data.append('h',$('body').data('cropH'));
            }
            data.append('image',$('#selectFile').get(0).files[0]);
            $.ajax({
                type: 'POST',
                data: data,
                processData: false,
                contentType: false
            });
        }

        (function($){
            $('#selectFile').on('change',function(){
                if(['image/jpeg','image/jpg'].indexOf($(this).get(0).files[0].type)==-1) {
                    alert('Разрешен формат только: JPG');
                    return;
                }
                var fileReader = new FileReader();
                fileReader.onload = function(e){
                    var image = new Image();
                    image.onload = function(){
                        if(this.width==1600 && this.height==350){
                            //  Кропать не нужно, сразу заливаем
                            send(0);
                        }else{
                            if(this.width>1600 && this.height>350){
                                $('#cropImage').attr('src',this.src);
                                $('#cropImage').cropbox({width:800,height:175,showControls:'auto'}).on('cropbox',function(event,results,img){
                                    $('body').data('cropX',results.cropX);
                                    $('body').data('cropY',results.cropY);
                                    $('body').data('cropW',results.cropW);
                                    $('body').data('cropH',results.cropH);
                                });
                                $('head').append($('<script>').attr('type','text/javascript').attr('src','http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.js'));
                            }else{
                                //  Изображение меньше заданных требований, уведомляем
                                alert('Изображение должно быть не менее 1600x350px');
                            }
                        }
                    };
                    image.src = e.target.result;
                }
                fileReader.readAsDataURL($(this).get(0).files[0]);
            });
        })(jQuery);
    </script>
</body>
</html>

Библиотеку взял отсюда: http://www.jqueryscript.net/other/jQuery-In-Place-Image-Cropping-Plugin-cropbox.html

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.