Сжатие изображений на стороне клиента перед загрузкой

Ответ 1

Возможно, вы сможете изменить размер изображения с помощью canvas и экспортировать его с помощью dataURI. Однако не уверен в сжатии.

Посмотрите на это: Изменение размера изображения в холсте HTML5

Ответ 2

Я только что разработал javascript-библиотеку JIC для решения этой проблемы. Это позволяет вам сжать jpg и png на стороне клиента на 100% с помощью javascript и не требует внешних библиотек!

Вы можете попробовать демо: http://makeitsolutions.com/labs/jic и получить источники здесь: https://github.com/brunobar79/JIC

Ответ 3

Я читал об этом эксперименте: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

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

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

Ответ 4

Я опаздываю на вечеринку, но это решение сработало для меня довольно хорошо. На основе этой библиотеки вы можете использовать функцию lik this - настройка изображения, качества, максимальной ширины и формата вывода (jepg, png):

function compress(source_img_obj, quality, maxWidth, output_format){
    var mime_type = "image/jpeg";
    if(typeof output_format !== "undefined" && output_format=="png"){
        mime_type = "image/png";
    }

    maxWidth = maxWidth || 1000;
    var natW = source_img_obj.naturalWidth;
    var natH = source_img_obj.naturalHeight;
    var ratio = natH / natW;
    if (natW > maxWidth) {
        natW = maxWidth;
        natH = ratio * maxWidth;
    }

    var cvs = document.createElement('canvas');
    cvs.width = natW;
    cvs.height = natH;

    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
    result_image_obj.src = newImageData;
    return result_image_obj;
}

Ответ 5

Если вы ищете библиотеку для компрессии изображений на стороне клиента, вы можете проверить это: compress.js. Это поможет вам сжать несколько изображений только с помощью JavaScript и преобразовать их в строку base64. Вы можете указать максимальный размер в МБ, а также предпочтительное качество изображения.