将内联SVG另存为JPEG / PNG / SVG [英] Save inline SVG as JPEG/PNG/SVG
问题描述
我的html中有一个内联SVG,我需要能够将其保存为JPEG,PNG或SVG。
I have an inline SVG in my html, and I need to be able to save this as either a JPEG, PNG or SVG.
我试过几个将SVG转换为画布然后转换为JPEG的不同方法,但我无法使这些工作。
I have tried a few different methods with converting the SVG to canvas and then converting to JPEG, but I haven't been able to get these working.
以下是我的内联SVG的示例。
Here is an example of my inline SVG.
.font {
color: #ffffff;
font-family: Roboto;
font-weight: bold;
text-transform: uppercase;
}
.name {
font-size: 64pt;
}
.top-bar-text {
font-size: 32pt;
}
.font tspan {
dominant-baseline: middle;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<svg width="256" height="256" id="icon">
<rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
<path class="bg2" id="bg_color_2" d="M 0 96 L0,256 L256,256 L256,96 s -128 96 -256 0" fill="#08a21c" />
<text id="left_corner_text" x="24" y="36" width="48" height="64" class="top_bar lct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>1</tspan></text>
<text id="right_corner_text" x="232" y="36" width="48" height="64" class="top_bar rct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>2</tspan></text>
<text id="line_1_text" transform="scale(1,2)" x="128" y="90" width="256" height="192" class="l1t font name" text-anchor="middle" fill="#ffffff"><tspan>ABC</tspan></text>
</svg>
此外,并非所有元素都需要导出,因为用户的一些选项是删除顶角数字。
Also, not all the elements need to be exported, as some of the options the user has is to remove the top corner numbers.
我想将它转换为直接下载到浏览器。
I would like for when it's been converted to download straight to the browser.
推荐答案
现在这个非常简单。
基本思路是:
- svg to canvas
- canvas to 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;
});
<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>
关于下载部分,你可以设置文件名等等(虽然没有这个例子)。几天前,我回答了一个关于如何从给定页面下载特定部分HTML的问题。下载部分可能有用: https://stackoverflow.com/a/28087280/2178180
Regarding the downloading part, you can set up a filename and etc etc (although not in this example). Some days ago i answered a question on how to download a specific portion of HTML from the given page. It might be useful regarding the downloading part: https://stackoverflow.com/a/28087280/2178180
更新:现在让您指定文件名
update: now letting you specify the filename
这篇关于将内联SVG另存为JPEG / PNG / SVG的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!