Сохранить холст как jpg на рабочий стол

Ответ 1

Загрузить атрибут

В HTML5 есть новый атрибут загрузки, который позволяет указать имя файла для ссылок.

Я сделал это для сохранения холста. У него есть ссылка ( "Загрузить как изображение" ) -

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

И функция:

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

Вы даже можете изменить имя файла динамически, установив атрибут downloadLnk.download = 'myFilename.jpg'.

Демо из архивов.

Ответ 2

Проверьте это, если это поможет, jsfiddle реализован для того же требования.  http://jsfiddle.net/5whKM/

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>

<script>
  var img = document.images[0];
  img.onclick = function() {
    var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
  };
</script>

Ответ 3

Что вы должны сделать в этом случае, это отправить пользователю window.location=canvas.toDataURL('png') в местоположение файла, который вы хотите загрузить. Итак, ваше решение об открытии новых окон - это то, что вы должны делать, и что такое "загрузка".

Например, если вы хотите, чтобы они сохраняли EXE для файла, вы просто позволяете им нажимать на привязку, а браузер обрабатывает запрос файла и его загрузку. Вы также можете сделать это с помощью JavaScript, но это проблема безопасности и пользовательского опыта, чтобы просто открыть SaveAs для пользователей.

Также проверьте это: Загрузка браузера/HTML-силы изображения из src=" data: image/jpeg; base64... "