Как скачать изображение в base64?

Question

[Username]

На реакте генерирую таблицу, которую можно скачать. Т.е. у меня рендерится вёрстка, дальше с помощью плагина html2canvas.js вёрстку конвертирую в canvas элемент, а canvas элемент скачиваю с помощью canvas2image.js

html2canvas(ReactDOM.findDOMNode(this.refs.scheduleTable), {
    onrendered: function (canvas) {
        //Получаю изображение в base64
        var dataURL = canvas.toDataURL('image/png');


        // Convert and download as image 
        Canvas2Image.saveAsPNG(canvas);

    }
});

1. base64 передавал в window.open(dataURL), не то открывается картинка в новой вкладке, а нужна загрузка при клике на кнопку скачать
   
2. Пытался записать base64 в state внутри onrendered, ошибка

   TypeError: this.setState is not a function

   за пределами записывает undefined
   
3. Canvas2Image.saveAsPNG(canvas); сохраняет картинку без расширения, хотя это самый простой вариант сохранения, была бы возможность указать формат.
   

Как можно реализовать сохранения картинки при клике на кнопку скачать картинку?

Answer 1

[Петр]

Загрузка браузером всегда происходит, если в ответе задан заголовок
Content-disposition: attachment; filename=fileName

Comments

[Username]

Как можно задать заголовок?

[Петр]

Username: Упс. Не учел, что не с сервера у вас данные. Тогда так https://stackoverflow.com/questions/31656689/how-t...

[Username]

Петр: Да я так пробовал делать, но я не могу установить href атрибут с base64 и имитировать клик по ссылке на react'e.

[furrya_black]

Зачем base64 в href? Может в src? У ссылки нет нативного onclick?

[furrya_black]

https://jsperf.com/loading-images-blobs-vs-dataurls

Может это вам поможет.

[Username]

furrya_black: Есть. Если base64 вставить в href, то при клике на эту ссылку происходит скачивание картинки

<div className="filter-inline">
                        <label className="filter-label">Скачать расписание</label>
                        <a onClick={this.downloadScheduleClick} ref="downloadSchedule"
                           className="btn btn-default dropdown-toggle btnM btnM-filter" download="schedule.png">Скачать
                            картинкой
                        </a>
                    </div>