Перетащите DataURL img на рабочий стол в Firefox или сделайте настоящий png

У меня есть эта функция, чтобы превратить содержимое холста в данные PNG.

function saveImage()
{
    var img = canvas.toDataURL("image/png");
    var imgWin = window.open('','', 'width=880, height=720');

    imgWin.document.write('<!doctype html><html><head></head>' +
            '<body> <img src="' + img +'" alt=""/> </body> </html>');   
}

Работает как шарм и помещает png прямо на экран, как и должно быть. Теперь я могу легко перетащить его на рабочий стол в Chrome.

Но с Firefox я получаю ссылку, а в IE (которого я действительно не забочусь о поддержке приложения, которое я создаю) она вообще не будет перетаскиваться.

Я понимаю, что это связано с тем, как браузеры обрабатывают DataURL. Но есть ли способ превратить этот DataURL-png в реальное изображение, которое сохраняется в кеше или в другом месте, откуда я могу его прочитать?

Так это

var img = canvas.toDataURL("image/png");
<img src="' + img +'" alt=""/>

превратится во что-то вроде:

var img = canvas.toDataURL("image/png");
img.goNinjaAndTurnIntoRealPng()
<img src="../local/img.png" alt=""/>

javascript html png data-url
person Christoffer    schedule 16.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш подход goNinjaAndTurnIntoRealPng() работает только в том случае, если вы отправляете данные изображения на сервер и сохраняете их там (чтобы получить путь, подобный "../local/img.png") - зависит от вашего приложения, если это имеет смысл.

Если вы просто хотите, чтобы пользователи могли напрямую загружать холст в формате PNG, вы можете запустить загрузку изображения следующим образом. Лично я предпочитаю этот подход, потому что пользователям не нужно вручную нажимать «сохранить как» — это намного удобнее.

<canvas id="canvas" width="880" height="720"></canvas><br>
<!-- Note the "download" attribute here that specifies a filename -->
<a download="canvas_image.png" id="click">Save PNG image</a>

<script>
    var canvas = document.getElementById("canvas");
    document.getElementById("click").onclick = function(){
        this.href = canvas.toDataURL("image/png");
    };
</script>

Демо (JSFiddle) (протестировано в Firefox и Chrome)

Также см. этот вопрос, в котором содержится дополнительная информация.

person Aletheios    schedule 16.10.2013
comment
Спасибо. На самом деле я использовал атрибут загрузки, как и ваш пример. Вот так: '‹a href=' + img + ' download=img.png›‹img src=' + img +' alt=/›‹/a› - person Christoffer; 16.10.2013