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

[KupueIIIKo]

Ну и почему тишина? кто что еще предложит как его дорабоать?

[KupueIIIKo]

Благодаря гуглу теперь все изображения на выходе получают формат jpeg))) Значит с 5 метров до 200КБ с разрешения 4К до 1024)
Делаю щас отправку на сервак через POST) кому надо в личку)

[Deff]

KupueIIIKo,
Вопрос:
Через POST - каким mime-типом отправка?
multipart/form-data (стандартно) или всё же application/octet-stream ?

[KupueIIIKo]

application/x-www-form-urlencoded

[Deff]

KupueIIIKo, Спс
Эт мну ужо и бесит - пока не нашел достойного варианта идентичного отправке формы

[KupueIIIKo]

при отправке через аякс, можно менять mime)

[Deff]

KupueIIIKo,
Угу - ток при наличии филе API и и blob data итого в Хроме

[nerv_]

всем привет. Написал обертку для преобразования
a) image -> canvas
b) canvas -> canvas
Никакого сакрального смысла она не несет, просто чтобы не писать одно и тоже по многу раз. Например,

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://nepiu.narod.ru/links/jquery.to.canvas.js"></script>

<!-- будем надеяться, что это изображение в кеше :) -->
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">​

<script>
    
    // to canvas 1:1
    $( 'img' ).toCanvas().appendTo( 'body' ).wrap( '<div>' );
    
    // zoom
    $( 'img' ).toCanvas({ width: 300, height: 68 }).appendTo( 'body' ).wrap( '<div>' );
    
    // crop
    $( 'img' ).toCanvas({ sw: 90, dw: 90 }).appendTo( 'body' ).wrap( '<div>' );
        
</script>

После того, как будут произведены все необходимые манипуляции с канвасом (ресайз и/или кроп), преобразую его в dataURL c помощью метода

var base64 = canvas.toDataURL( 'image/jpeg', 1 );

Можно ли это дело (base64) отправить на сервер в виде new FormData()? Т.е. сперва преобразовать, а затем отправить. Чтобы было так же просто, как и со встроенным объектом File?

var formData = new FormData();
formData.append( 'file', file );
xhr.send( formData );

Глупо звучит, но тем не менее

[Яростный Меч]

Можно ли это дело (base64) отправить на сервер в виде new FormData()? Т.е. сперва преобразовать, а затем отправить. Чтобы было так же просто, как и со встроенным объектом File?
var formData = new FormData();
formData.append( 'file', file );
xhr.send( formData );

у канвы есть метод toBlob, но реализован по-моему только в FF.

так что два варианта: либо отправлять на сервер строку base64 и там раскодировать, либо как-то раскодировать вручную на js - получить байты в виде Uint8Array, потом передать в конструктор Blob


функция с интуитивно понятным названием "atob" переводит base64 в строку, из этой строки (используя charCodeAt) и можно собрать Uint8Array

[Яростный Меч]

вот, набросал http://jsfiddle.net/rsXTj/