Задача загрузки файла на сервер тривиальна и рассматривается в любом пособии "для начинающих" в первых же главах. Но в то же время, организация удобного интерфейса загрузки является очень важным аспектом для любого 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);
Комментарии