Изменение размера изображения перед загрузкой

в 2011 году мы можем знать, сделать это с помощью API-интерфейса файла и холста. Это работает пока только в firefox и chrome. Вот пример :

var file = YOUR_FILE,
    fileType = file.type,
    reader = new FileReader();

reader.onloadend = function() {
  var image = new Image();
      image.src = reader.result;

  image.onload = function() {
    var maxWidth = 960,
        maxHeight = 960,
        imageWidth = image.width,
        imageHeight = image.height;

    if (imageWidth > imageHeight) {
      if (imageWidth > maxWidth) {
        imageHeight *= maxWidth / imageWidth;
        imageWidth = maxWidth;
      }
    }
    else {
      if (imageHeight > maxHeight) {
        imageWidth *= maxHeight / imageHeight;
        imageHeight = maxHeight;
      }
    }

    var canvas = document.createElement('canvas');
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

    // The resized file ready for upload
    var finalFile = canvas.toDataURL(fileType);
  }
}

reader.readAsDataURL(file);

есть несколько технологий, способных Plupload tool, который заявляет, что он может сделать изменение размера перед загрузкой, но я еще не пробовала. Я также нашел подходящий ответ в моем вопрос о двоичной обработке изображений javascript libs.

Я думаю, что вам нужна Java или ActiveX для этого. Например Тонкая Загрузка Изображения

то, что говорят ЯО и руссау-правда. Причина в том, что JavaScript не имеет доступа к локальной файловой системе из соображений безопасности. Если JavaScript может "видеть" ваши файлы изображений, он может видеть любой файл, и это опасно.

для этого вам нужен элемент управления на уровне приложения, а это означает Flash, Java или Active-X.

к сожалению, вы не сможете изменить размер изображений в Javascript. Это возможно в Silverlight 2 tho.

Если вы хотите купить что-то уже сделано: Изображения Тема Браузера Как Никто Другой Загрузчик довольно впечатляет - $USD250 для версий ActiveX и Java. На сайте есть некоторые демо-версии, я уверен, что facebook использует тот же элемент управления.

чистое решение JavaScript. Мой код изменяет размер JPEG с помощью билинейной интерполяции, и он не теряет exif.

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) {
    var req = new XMLHttpRequest();
    req.open("POST", "/jpeg", false);
    req.setRequestHeader('Content-Type', 'image/jpeg');
    req.send(data.buffer);
}

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++){
        var reader = new FileReader();
        reader.onloadend = function(e){
            MinifyJpegAsync.minify(e.target.result, 1280, post);
        };
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

вы можете изменить размер изображения на стороне клиента перед его загрузкой с помощью платформы обработки изображений.

ниже я использовал MarvinJ чтобы создать запускаемый код на основе примера на следующей странице: "обработка изображений на стороне клиента перед отправкой на сервер"

в основном я использую метод Марвин.масштаб.(..) чтобы изменить размер изображения. Затем я загружаю изображение в виде большого двоичного объекта (используя метод изображения.toBlob()). Сервер отвечает, предоставляя URL-адрес полученного изображения.

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
	
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,
		
	   
		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>