26 августа 2013

Image resize by HTML5

Задача загрузки файла на сервер тривиальна и рассматривается в любом пособии "для начинающих" в первых же главах. Но в то же время, организация удобного интерфейса загрузки является очень важным аспектом для любого web-приложения. Раньше для этого часто использовался flash, так как он позволял производить предварительную обработку изображений, сжатие, а также иллюстрирование хода загрузки.

С появлением HTML5, применение flash потеряло актуальность. И прогресс бары, иллюстрирующие ход загрузки файлов, и предварительную обработку изображений можно реализовать на новом технологическом стандарте. =)

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


Зачастую пользователь не думает о размере загружаемого им изображения и о том, сколько времени это может занять. И если изображение загружается долго, то пользователь просто считает сервис "тормознутым" и больше к нему не прибегает, хотя дело, конечно, не в сервисе. ;)

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

function sendResized(file, maxWidth=0){
      
var reader = new FileReader();
    reader.onload = function() {
   
   // Если максимальный размер не задан, устанавливаем его 2000px
   if (maxWidth == 0)
      maxWidth = 2000;
 
    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {
      
      // Расчитываем новые размеры изображения
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > maxWidth) {
               tempH *= maxWidth / tempW;
               tempW = maxWidth;
            }
        }else{
            if (tempH > maxWidth) {
               tempW *= maxWidth / tempH;
               tempH = maxWidth;
            }
        }
      tempW = Math.round(tempW);
        tempH = Math.round(tempH);
      
      // Создаем холст
        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        dataURL = canvas.toDataURL();
      canvas.toBlob(function(blob) {
         // Отправляем уменьшенное изображение на сервер
         // Создаем объект типо FormData
         var data = new FormData();
         // Добавляем наше обработанное изображение
         data.append('uploaded-file', blob);
         // Отправляем на сервер
         $.ajax({
            url: 'upload.php',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
               alert(data);
            }
         });
         
      });   
      }
   }
   reader.readAsDataURL(file);   
}

// ToBlob
(function(a){"use strict";var b=a.HTMLCanvasElement&&a.HTMLCanvasElement.prototype,c=function(){try{return!!(new Blob)}catch(a){return!1}}(),d=a.BlobBuilder||a.WebKitBlobBuilder||a.MozBlobBuilder||a.MSBlobBuilder,e=(c||d)&&a.atob&&a.ArrayBuffer&&a.Uint8Array&&function(a){var b,e,f,g,h,i;a.split(",")[0].indexOf("base64")>=0?b=atob(a.split(",")[1]):b=decodeURIComponent(a.split(",")[1]),e=new ArrayBuffer(b.length),f=new Uint8Array(e);for(g=0;g<b.length;g+=1)f[g]=b.charCodeAt(g);return i=a.split(",")[0].split(":")[1].split(";")[0],c?new Blob([e],{type:i}):(h=new d,h.append(e),h.getBlob(i))};a.HTMLCanvasElement&&!b.toBlob&&(b.mozGetAsFile?b.toBlob=function(a,b){a(this.mozGetAsFile("blob",b))}:b.toDataURL&&e&&(b.toBlob=function(a,b){a(e(this.toDataURL(b)))})),typeof define!="undefined"&&define.amd?define(function(){return e}):a.dataURLtoBlob=e})(this);

 

live Demo Скачать

Комментарии  

Kotejkee16 мая 12:05
Супер, замечательная вещь!
mrFANRA28 октября 07:10
Алилуя братья! Будущее наступило!

У вас нет прав для комментирования