将内联svg保存为图像文件

我有一个内联SVG代码，基于用户选择的颜色/ css进行更改。将内联svg保存为图像文件

我希望能够将行svg保存为外部文件onclick（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>

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

来源

2015-07-11 WebbySmart

浏览器内容无法写入本地文件系统，您需要将标记发送到服务器并让服务器将其作为下载发回。 –

我该怎么做？我正在使用PHP。 – WebbySmart

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

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。

来源

2015-07-12 14:46:21 WebbySmart

将内联svg保存为图像文件

回答

相关问题