Изменение размера и обрезка изображений

Я использую jQuery File Uploader от blueimp и пытаюсь изменить размер и обрезать изображения. так что они в конечном итоге будут 75x75 пикселей.

Как бы я сделал это так, чтобы, если пользователь загружает изображение (независимо от его размеров), он сначала изменял его размер так, чтобы его ширина и высота были не менее 75 пикселей, а затем обрезал изображение по центру, чтобы изображение в конечном итоге было 75х75 пикселей?

Вот что у меня есть до сих пор:

<img src="imagelinkhere.png" />
<input id="profile-upload" type="file" name="files[]" data-url="file-upload/server/php/">

jQuery:

$(function () {
    $('#profile-upload').fileupload({
        add: function(e, data) {
            var uploadErrors = [];
            var acceptFileTypes = /(\.|\/)(jpe?g|png)$/i;
            if(!acceptFileTypes.test(data.originalFiles[0]['type'])) {
                uploadErrors.push('Invalid type.');
            }
            if(data.originalFiles[0]['size'] > 1000000) {
                uploadErrors.push('Image too big.');
            }
            if(uploadErrors.length > 0) {
                alert(uploadErrors);
            } else {
                data.submit();
            }
        },
        dataType: 'json',
        done: function (e, data) {
            alert(data);
        }
    });
});

Пожалуйста помоги!


javascript jquery jquery-file-upload blueimp
person Bagwell    schedule 06.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот метод, который использует холст для изменения размера изображения. Первым аргументом должен быть объект Image.

function(image, width, height) {
    var c = window.document.createElement('canvas'),
        ctx = c.getContext('2d');

    c.width = width;
    c.height = height;

    ctx.drawImage(image, 0, 0, width, height);
    return c.toDataURL('image/jpeg');
}
person Trevor Dixon    schedule 06.01.2014
comment
это поддерживается во всех браузерах?IE 7,8,9 - person iJade; 08.01.2014