html保存为svg JavaScript – 将内联SVG保存为JPEG / PNG / SVG

如今这很简单.

基本思路是：

> svg到画布

> canvas到dataUrl

>从dataUrl触发下载

它实际上在stackoverflow片段之外工作

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;

});

svg to png

Look, i'm cool

关于下载部分,您可以设置文件名等(虽然不在本例中).前几天我回答了一个关于如何从给定页面下载特​​定部分HTML的问题.下载部分可能有用：/a/28087280/2178180

update：现在让你指定文件名

如果觉得《html保存为svg JavaScript – 将内联SVG保存为JPEG / PNG / SVG》对你有帮助，请点赞、收藏，并留下你的观点哦！