有没有办法让用户在使用浏览器在javascript svg画布上创建矢量图后，将该文件下载到本地文件系统？
SVG对我来说是一个全新的领域，所以如果我的措辞不准确，请耐心等待。
答案 0 :(得分：64)
您可以避免往返服务器。
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＆amp; Firefox，可以在支持data-uri
答案 1 :(得分：18)
无需进行base64编码 - 您可以在其中创建包含原始SVG代码的链接。这是一个修改过的函数encode_as_img_and_link（）来自The_Who的回答：
function img_and_link() {
$('body').append(
$('<a>')
.attr('href-lang', 'image/svg+xml')
.attr('href', 'data:image/svg+xml;utf8,' + unescape($('svg')[0].outerHTML))
.text('Download')
);
}
答案 2 :(得分：17)
saveAs(new Blob([SVG_DATA_HERE], {type:"application/svg+xml"}), "name.svg")
答案 3 :(得分：15)
可能可以使用常规的“保存”浏览器命令，但它不仅会保存SVG画布，而是会保存整个页面。
我认为最好的办法是使用AJAX并将整个SVG XML数据作为POST数据发送到服务器脚本，并让该脚本只发回带有标题Content-Disposition: attachment; filename=yourfile.svg的POST数据。
（在PHP下，您可以使用file_get_contents('php://input')获取原始POST内容。）
答案 4 :(得分：10)
来自Eli Gray的FileSaver我得到了它（铬）：
bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");
SVG来自keith woods jquery的svg。
答案 5 :(得分：7)
// save SVG
$('#SVGsave').click(function(){
var a = document.createElement('a');
a.href = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
a.download = 'plot.svg';
a.target = '_blank';
document.body.appendChild(a); a.click(); document.body.removeChild(a);
});
答案 6 :(得分：5)
我最近发现了这个Chrome插件http://nytimes.github.io/svg-crowbar/。它对我的需求来说有点儿麻烦，但基本上有效。
我之前已经提出了一个类似于接受的答案的解决方案，该解决方案涉及服务器端脚本但是它已经很长时间了，并且还存在所有样式必须在标记中内联的问题。 Crowbar似乎为你照顾好了，这很好。
答案 7 :(得分：5)
我回答这个主题，即使它已经存在了几年，因为最近网络浏览器在支持SVG和其他相关行为方面的融合已经引起了人们对SVG的兴趣，并允许一个＆ ＃39;通用＆＃39;回答这个问题。本质上，zneak的方法是正确的，但在我看来，简洁（即我需要一段时间让它为自己工作）。我也认为他对AJAX的引用要么不必要，要么不是我对AJAX的理解（=使用XMLHttpRequest）。因此，我将使用纯JavaScript（即没有JQuery或任何其他库）提供更详细的答案，并为Java，Perl和PHP提供服务器代码。
（1）将HTML页面中的（动态生成的）SVG内容包含在具有唯一ID的div中，例如：
<div id="svg"><svg...>SVG content</svg></div>
（2）包含一个调用JavaScript函数的按钮，例如
<button onclick="sendSVG();">Save as SVG File</button>
（3）包括按钮标记中指定的JavaScript函数：
function sendSVG()
{
var svgText = document.getElementById('svg').innerHTML;
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://path-to-your-server-app");
form.setAttribute("accept-charset", "UTF-8");
var hiddenSVGField = document.createElement("input");
hiddenSVGField.setAttribute("type", "hidden");
hiddenSVGField.setAttribute("name", "svgText");
hiddenSVGField.setAttribute("value", svgText);
form.appendChild(hiddenSVGField);
document.body.appendChild(form);
form.submit();
}
（4）编写服务器应用程序以接受您的SVGtext帖子请求，并使用Content-Disposition返回为image / svg + xml以指定附件。提供了三种语言的工作代码，虽然我不是Perl程序员，并且从未在愤怒中使用过PHP。
Java Servlet
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String svgText = (String) request.getParameter("svgText");
response.setContentType("image/svg+xml");
response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
PrintWriter out = response.getWriter();
out.println(svgText);
}
Perl CGI
use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
-content_disposition => "attachment; filename=image.svg");
print $svgText;
PHP
<?php
$svgText = $_POST['svgText'];
header('Content-type: image/svg+xml');
header('Content-Disposition: attachment; filename="image.svg"');
print "$svgText";
?>
我在这里使用了一个硬编码的名称（image.svg），但实际上从页面中获取了我生成的动态内容的描述（再次使用div和ID，{{1} }）。
已经在Mac Safari 9，Firefox 42，Chrome 47，Opera 34以及Windows7 / IE 11和Windows10 / Edge上进行了测试，并且在每种情况下都会下载svg文件或提示下载svg文件。生成的文件将打开，例如Adobe Illustrator或您设置为打开svg文件的任何其他应用程序。
这个现实世界的例子（如果你考虑学术研究真实世界）在基因部分的http://flyatlas.gla.ac.uk/MidgutAtlas/index.html处。
答案 8 :(得分：2)
是的，这是可能的。使用jquery.svg http://keith-wood.name/svgRef.html并使用函数svg.toSVG（）发布svg xml数据（在提交时写入隐藏字段）。 让php保存并使用imagemagick（convert image.svg image.png）转换为光栅，然后使用标题（“Content-Type：application / octet-stream”）强制下载文件并读取文件。
答案 9 :(得分：1)
最兼容的方式是到服务器的往返。您也可以在某些浏览器中使用data: URI。
答案 10 :(得分：1)
您无法使用javascript将任何内容保存到本地文件系统，您应该将canvas的内容发送到服务器并让用户下载并保存。
答案 11 :(得分：1)
回答我自己的问题：
虽然不是最好的另一种可能性是在网页上显示序列化内容并让用户选择，复制和粘贴它。 这是在调查了伊莱格雷的解决方案后。
答案 12 :(得分：1)
我可能发现了一种更好的方法，可以不强迫用户右击“将图像另存为”。只需将canvas base64代码直接绘制到链接的href中并进行修改，以便下载自动启动。我不知道它的通用浏览器是否兼容，但它应该适用于主/新浏览器。
var canvas = document.getElementById('your-canvas');
if (canvas.getContext) {
var C = canvas.getContext('2d');
}
$('#your-canvas').mousedown(function(event) {
// feel free to choose your event ;)
// just for example
// var OFFSET = $(this).offset();
// var x = event.pageX - OFFSET.left;
// var y = event.pageY - OFFSET.top;
// standard data to url
var imgdata = canvas.toDataURL('image/png');
// modify the dataUrl so the browser starts downloading it instead of just showing it
var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
// give the link the values it needs
$('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);
});
随意包装你想要的任何东西，希望有所帮助
答案 13 :(得分：1)
$(document).ready(function(){
$("#btnDownload").click(function(){
var $container = $('#svg-container'),
// Canvg requires trimmed content
content = $container.html().trim(),
canvas = document.getElementById('svg-canvas');
// Draw svg on canvas
canvg(canvas, content);
$container.hide();
// Change img be SVG representation
var theImage = canvas.toDataURL('image/jpeg');
var a = document.createElement('a');
a.href = theImage; // xhr.response es un blob file
a.target = '_blank';
a.download = 'prueba'; // nombre del archivo.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
});//fin function
});// fin <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0" stroke-linejoin="round"></path></g><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z" stroke-linejoin="round"></path></g><g style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z" stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z" stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z" stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1" opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1" opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1" opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1" visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875" text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible" transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z" stroke-linejoin="round"></path></g><g r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z" stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z" stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z" stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible" transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle" style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend" transform="translate(270,364)"><g ><g><g class="highcharts-legend-item" transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15">Sales</text><rect x="0" y="4" width="16" height="12" fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>
</div>
<section>
<canvas id="svg-canvas"></canvas>
</section>
答案 14 :(得分：0)
答案 15 :(得分：-1)
根本不需要做任何编程。人们已经为此建立了在线应用程序，并包含可定义的参数，如尺寸，分辨率，输出格式等。
这是我为svg-＆gt; jpeg找到的更好的在线图片转换应用之一。http://image.online-convert.com/convert-to-jpg