javascript - 如何将 svg Canvas 保存到本地文件系统

Question

有没有办法允许用户在使用浏览器在 javascript svg Canvas 上创建矢量图后，将此文件下载到他们的本地文件系统？

SVG 对我来说是一个全新的领域，所以如果我的措辞不准确，请耐心等待。

Answer 1

您可以避免往返服务器。

Base64 编码您的 SVG xml。

然后生成指向该数据的链接。用户可以右键点击保存到本地。

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

img 标签在 Webkit 中工作，链接在 Webkit 和 Firefox 中工作，并且可以在任何支持 data-uri

的浏览器中工作