将内联 svg 保存为图像文件答案

【问题标题】：Saving inline svg as a image file将内联 svg 保存为图像文件
【发布时间】：2015-09-30 07:27:37
【问题描述】：

我有一个内联 SVG 代码，它会根据用户选择的颜色/css 进行更改。

我希望能够在点击时将 svg 行保存为外部文件（svg 或 png 或 jpeg）。

示例：http://jsfiddle.net/WebbySmart/fof8jqxx/

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<div style="clear:both;"></div>
<br>
<button>Save Image</button>

有没有办法做到这一点？非常感谢 - 谢谢。

【问题讨论】：

浏览器内容无法写入本地文件系统，您需要将标记发送到服务器并让服务器将其作为下载发送回。
我该怎么做？我正在使用 php。
这能回答你的问题吗？ Save inline SVG as JPEG/PNG/SVG

标签： html svg onclick png inline

【解决方案1】：

找到了一个完美的解决方案。

http://jsfiddle.net/LznLjxq7/

<button>svg to png</button>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
  <rect x="10" y="10" width="50" height="50" />
  <text x="0" y="100">Look, i'm cool</text>
</svg>

<canvas id="canvas"></canvas>

纯 JavaScript

var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');

function triggerDownload (imgURI) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'MY_COOL_IMAGE.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

btn.addEventListener('click', function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;
});

参考来自： Save inline SVG as JPEG/PNG/SVG。

【讨论】：