Статьи

Предварительный просмотр и обрезка перед загрузкой

Декабрь 4, 2018

DEMO

В дополнение к нашему предыдущему сообщению о перетаскивании файловНам удалось добавить некоторые дополнительные функции к этому. HTML5 позволяет пользователю предварительно просмотреть изображение перед его загрузкой на сервер. В типичной веб-среде изображение должно придерживаться определенного соотношения ширины и высоты, чтобы поместиться в конкретный слот. Это становится необходимостью в слайд-шоу, галереях или плотно оформленных страницах. Сценарий, приведенный ниже, позволяет обрезать изображение до заданного соотношения ширины и высоты. Прелесть сценария в том, что он позволяет обрезать только часть исходного изображения. Например, если вам нужно изображение шириной 400 пикселей и высотой 200 пикселей, а исходное загруженное изображение имеет ширину 1000 пикселей и высоту 1000 пикселей, это позволит вам выбрать часть изображения и изменить его размер до 400 x 200.Это фактически означает, что вы можете выбрать область 400 x 200 исходного изображения или 800 x 400 оригинала (масштабируется до 400 x 200 после изменения размера) и так далее. Это никогда не допустит урожай, который не удовлетворяет вышеуказанному отношению ширины к высоте. Точно так же это не позволит вам выбрать часть изображения размером менее 400 х 200.

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

Для демонстрации мы будем использовать Ajax Upload от Andrew Valums, который можно найти по адресу http://valums.com/ajax-upload/, и imgAreaSelect, который можно найти по адресу http://odyniec.net/projects/imgareaselect/ .

Мы добавили еще несколько параметров, которые будут использоваться скриптом загрузки Drag and Drop, который используется для обрезки изображений в очереди.

$(document).ready(function () {
    uploader = new qq.FileUploader({
        element: document.getElementById('fileuploader'),
        folderName: 'uploads',
        action: 'upload.php',
        //Files with following extensions are only allowed
        allowedExtensions: ['gif','jpg','jpeg','png','txt'],
        showCropTool: 1,
        sizeLimit: 10737418240, // Maximum filesize limit which works without any problems is 30MB. Current limit is set to 10MB = 10 * 1024 * 1024
        params: {
            'uploadedBy': 'Sapnagroup',
            'x1': '0',  // x coordinates of the image
            'y1': '0',      // x coordinates of the image
            'x2': '300',    // x coordinates of the image
            'y2': '150',    // y coordinates of the image
            'cWidth': '300',        // required crop width
            'cHeight': '150',       // required crop heignt
            'oWidth': '800',        // width of the crop preview image
            'oHeight': '600',       // height of the crop preview image
            'rWidth': '300',        // resize width
            'rHeight': '150'        // resize height
        },
        onSubmit: function(id, fileName){
 
        },
        onComplete: function(id, fileName, responseJSON){ // Customize the output sent to responseJSON in demo.php
            resetParams();
 
            switch(responseJSON.ext){
                case 'gif':
                case 'jpg':
                case 'jpeg':
                case 'png':
                var imageHTML = '
<div style="margin: 0 10px 0 0;"><img src="%27%20+%20responseJSON.thumbnailPath%20+%20%27" alt="" border="0" width="75">
' + fileName + ' uploaded by ' + responseJSON.uploadedBy + '</div>
 
';
                document.getElementById('imageThumbnails').innerHTML = document.getElementById('imageThumbnails').innerHTML + imageHTML;
                break;
                default:
                // Do nothing
                break;
            }
 
            if(uploader._filesInProgress < 1){
                document.getElementById('message').innerHTML = "All files have been uploaded. The page will refresh itself in 10 seconds."
                // var t = setTimeout('location.href = location.href;', 10000)
            }
        }
    });
});
 
var uploader;
 
// Function to update the parameters once a crop region is selected
function updateParams(img, selection){
    uploader.setParams({
        'x1': selection.x1,
        'y1': selection.y1,
        'x2': selection.x2,
        'y2': selection.y2,
        'cWidth': selection.width,
        'cHeight': selection.height,
        'oWidth': img.width,
        'oHeight': img.height,
        'rWidth': '300',
        'rHeight': '150'
    });
}
 
// Function to reset all parameters
function resetParams(){
    uploader.setParams({
        'x1': '0',
        'y1': '0',
        'x2': '300',
        'y2': '150',
        'cWidth': '300',
        'cHeight': '150',
        'oWidth': '800',
        'oHeight': '600',
        'rWidth': '300',
        'rHeight': '150'
    });
}

Мы также внесли несколько изменений в fileuploader.js, который вы можете найти в источнике, который доступен для скачивания в конце этого поста. Особенно важна строка № 811. Мы инициализируем инструмент обрезки для каждого изображения, которое было поставлено в очередь для загрузки, и когда выбор обрезки сделан, мы просто обновляем выбор обрезки для использования в нашем сценарии на стороне сервера, используя функцию «updateParams».

$('#img_' + item.qqFileId).imgAreaSelect({ parent: '#cropDiv_' + item.qqFileId, x1: self._options.params.x1, y1: self._options.params.y1, x2: self._options.params.x2, y2: self._options.params.y2, persistent: true, resizable: true, onSelectChange: updateParams, parent : self._options.params.parent, minWidth: self._options.params.cWidth, minHeight: self._options.params.cHeight, aspectRatio: self._options.params.cWidth + ':' + self._options.params.cHeight, handles: true, zIndex: 1 });

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

// Get dimensions of the original image
list($currentWidth, $currentHeight) = getimagesize($result['path']);
 
// The x and y coordinates on the original image where we will begin cropping the image
$left = $_GET['x1'] * ($currentWidth / $_GET['oWidth']);
$top = $_GET['y1'] * ($currentHeight / $_GET['oHeight']);
 
// This will be the final size of the image (e.g. how many pixels left and down we will be going)
$cropWidth = $_GET['cWidth'] * ($currentWidth / $_GET['oWidth']);
$cropHeight = $_GET['cHeight'] * ($currentHeight / $_GET['oHeight']);
 
// Crop the image
$canvas = imagecreatetruecolor($cropWidth, $cropHeight);
$currentImage = imagecreatefromjpeg($result['path']);
imagecopy($canvas, $currentImage, 0, 0, $left, $top, $currentWidth, $currentHeight);
imagejpeg($canvas, $result['path'], 100);
 
// Get dimensions of the cropped image
list($currentWidth, $currentHeight) = getimagesize($result['path']);
 
// Resize the image
$canvas = imagecreatetruecolor($_GET['rWidth'], $_GET['rHeight']);
$currentImage = imagecreatefromjpeg($result['path']);
imagecopyresampled($canvas, $currentImage, 0, 0, 0, 0, $_GET['rWidth'], $_GET['rHeight'], $currentWidth, $currentHeight);
imagejpeg($canvas, $result['path'], 100);

Загрузите полный исходный код здесь .

37
Share: