将画布保存为jpg到桌面

Question

我试图从HTML5canvas将图像(JPEG)保存到桌面.我可以在新窗口中打开window.open(canvas.toDataURL('png'), "");,但如何将其保存到桌面？谢谢.

Answer 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'.

来自档案馆的演示.

Answer 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>