Возможно ли сохранить такое изображение? Как это лучше реализовать?

Question

[abbrakadabbra]

Вначале уточню: я начинаю в JS, поэтому вопрос для меня пока не очень понятный.
Решив попрактиковаться, придумал идею для одного сервиса, где нужно загрузить изображение, а поверх можно было наложить несколько готовых надписей.

Вопросы:
1) Возможно ли менять опасити накладываемых изображений налету, чтобы.. ->
2) Можно было сохранить оба изображения в 1 готовое изображения и скачать его (какой функцией это делается?) не обращаясь при этом к бэкэнду, т.е. все сделать средствами JS.
3) Возможно менять позицию загружаемой картинки на канвасе

Спасибо!

Answer 1

[Stalker_RED]

Можно так: jsfiddle.net/AbdiasSoftware/7PRNN
Но работает не везде.

Answer 2

[Валерий]

Пусть меня поправят знатоки, но на чистом JS вопрос сохранения не решить. Перемещать, накладывать, прозрачность и т.д. - не вопрос. Но сохранить и отдать в браузер нельзя.

Comments

[abbrakadabbra]

Это и было интересно. Возможно ли сохранить готовое изображение и скачать его налету :) А загрузку вообще не передавать на сервер. Все на стороне клиента.

Answer 3

[seriogja]

Как не крутись - без сервера не обойтись! :)

Comments

[abbrakadabbra]

Т.е. поперемещать картинку, настроить опасити наложения и кропнуть канвас нельзя?

[seriogja]

Поперемещать вы можете, обычный drag&drop. Да и прозрачность настроить не проблема. Вот только кропнуть и сохранить без обработки на сервере вы уже не сможете

[Петр]

Как это не обойтись. Даже raw форматы фоток разбирают https://habrahabr.ru/company/toptechphoto/blog/221907/

[seriogja]

Петр: На самом деле да, можно. Но так как человек написал, что он начинающий в JS, и вопрос стоял не в том, можно ли создать canvas и, поработав с ним сохранить, я ответил соответствующим образом.

[abbrakadabbra]

Петр seriogja Валерий Stalker_RED нашел вот что, и походу там все можно сделать без бэкэнда. Любые картинки обрабатывает на лету и дает сохранить. Кто скажет что у них за библиотека или самопис? Please, need your help! :) flag.im

[Петр]

abbrakadabbra: Походу самописное

[Валерий]

Да, по-моему что-то самописное или паленное с другой библиотеки. Так или иначе танцы с бубном, имхо.

[abbrakadabbra]

Валерий: работает же. Причем работает отлично.

Answer 4

[dom1n1k]

Чисто теоретически, обработанную картинку можно отдать в DOM, в элемент img, предложив юзеру самому ткнуть "save image as".
Но на практике браузер не даст этого сделать из-за безопасности - заблочит на этапе получения с канваса imageData. Причем там в разных браузерах политики чуть отличаются, но в общем и целом - работать не будет.
Все равно так или иначе придется проксировать через сервер.