Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обработка изображений перед загрузкой (https://javascript.ru/forum/misc/30330-obrabotka-izobrazhenijj-pered-zagruzkojj.html)

KupueIIIKo 01.08.2012 14:18

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

KupueIIIKo 02.08.2012 10:31

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

Deff 02.08.2012 13:21

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

KupueIIIKo 02.08.2012 18:17

application/x-www-form-urlencoded

Deff 02.08.2012 18:38

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

KupueIIIKo 02.08.2012 21:40

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

Deff 02.08.2012 22:39

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

nerv_ 30.10.2012 00:06

всем привет. Написал обертку для преобразования
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 );

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

Яростный Меч 01.10.2013 21:14

Цитата:

Сообщение от nerv_
Можно ли это дело (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

Яростный Меч 01.10.2013 21:58

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


Часовой пояс GMT +3, время: 02:00.