POSTing base64 данные JavaScript/jQuery

Question

Я работаю над веб-сайтом, который позволяет пользователям редактировать фотографии (в браузере), а затем загружать их. Чтобы редактировать изображения в браузере, я использую некоторые библиотеки JavaScript, которые работают с изображениями в base64. В результате для отправки POST изображения на мой сервер нельзя использовать простую форму с вводом файла. Значение скрытого ввода устанавливается в строку base64 отредактированного изображения, и это POSTED. Пожалуйста, см. Следующий, короткий пример.

http://pastebin.com/PrfWaS3D

Очевидно, что это очень сильно урезанная, но он содержит проблему, я бегу в. В POSTing 3MB анимированный GIF это заняло 6.5 минут. Во время которого мой компьютер был почти полностью заморожен/не отвечает. (Примечание: Это хорошо работает )

Возможно, это проблема с ОС/браузером (последний Google Chrome на Ubuntu), но я сомневаюсь. Если я вставляю этот файл в форму и удаляю base64-ing данных (т. Е. Стандартная POST-запись файла), то это происходит примерно через одну секунду.

Сравнить 6.5 минут до 1 секунды. Я должен делать что-то неправильно. Что я здесь делаю неправильно? Что я должен делать вместо этого? Я довольно новичок в веб-разработке, поэтому я немного в темноте. Я знаю, что base64 имеет что-то вроде увеличения размера 1.3x, но, очевидно, время загрузки здесь не масштабируется с 1,3x. Я сделал немного console.logging, и

var base64 = reader.result; 

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

Прошу прощения за мой длинный отложенный пост, но опять же, я новичок в веб-разработке, и не знаю действительно понимаю мою проблему, поэтому трудно быть кратким, получая всю информацию.

Благодаря

Answer 1

Поскольку вы используете несколько современный JS API в любом случае, это может быть лучше использовать:

• URL.createObjectURL() создать URL из Blob (намного быстрее и проверяющийся, чем URL-данных)
• btoa() в base64 закодировать строку (не нужно больше)
• FormData создать запрос POST
• XHR2 в отправьте его на сервер (включая прогресс!)

Так что-то вроде этого:

1. Get файла:
   file = input.files[0]
2. Преобразовать в машинописные массив, колдовать, конвертировать обратно в Blob:
   blob = <magic here>
3. Создание POST:
   fd = new FormData; fd.append('file', blob, 'image.png');
4. Загрузить:
   xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

<form action="1.php" method="post"> 
    <input type="text" id="txt" name="txt"> 
    <input type="submit" value="submit" > 
</form> 


function convertToDataURLviaCanvas(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 
convertToDataURLviaCanvas('1.jpg', function(base64Img){ 
    console.log(base64Img); 
    document.getElementById('txt').value= base64Img; 
}); 

1.php

echo '<img src="'.$_POST['txt'].'" />';