我尝试将 svg 转换为 png，但我在使用 canvg 时遇到了一些问题，我不明白为什么。如果我从 svg 中删除样式，它是可行的，但我想要带有样式的 png。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
//my svg element
<svg xmlns='http://www.w3.org/2000/svg' width='526' height='233' style='width: 100%; height: 100%; overflow: hidden; display: block; min-height: 431px; min-width: 481px;'><g><g /><g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='235' cy='268' rx='7.5' ry='7.5' /><path visibility='hidden' fill='none' pointer-events='stroke' stroke='white' stroke-miterlimit='10' stroke-width='9' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /><path fill='none' stroke='#000000' stroke-miterlimit='10' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><path fill='#ffffff' pointer-events='all' stroke='#000000' stroke-miterlimit='10' d='M 280 60 L 340 60 L 370 100 L 340 140 L 280 140 L 250 100 Z' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><rect fill='#ffffff' pointer-events='all' stroke='#000000' x='400' y='200' width='80' height='80' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='425' cy='390' rx='40' ry='40' /></g></g><g /><g /></g></svg>
</div>
<a href="#">save</a>
<br/>
<a href="https://github.com/gabelerner/canvg">Canvg</a>
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js"></script>
<script>
document.querySelector('a').addEventListener('click', function (e) {
e.preventDefault();
var svg = document.querySelector('svg');//get svg element
var canvas = document.createElement('canvas');//create canvas
canvas.height = svg.getAttribute('height');//set attribute
canvas.width = svg.getAttribute('width');
canvg(canvas, svg.parentNode.innerHTML.trim());//draw svg to canvas
var dataURL = canvas.toDataURL('image/png');//get url
var data = atob(dataURL.substring('data:image/png;base64,'.length)),
asArray = new Uint8Array(data.length);
for (var i = 0, len = data.length; i < len; ++i) {
asArray[i] = data.charCodeAt(i);
}
var blob = new Blob([asArray.buffer], {type: 'image/png'});
saveAs(blob, 'export_' + Date.now() + '.png');//save as png
});
</script>
</body>
</html>因此，我想在 base64 中为其添加图像或 url
最佳答案
不使用任何插件也可以使用如下代码:
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="' + png + '" width=100%/>';
DOMURL.revokeObjectURL(png);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href = image; // it will save locally
};
img.src = url;#canvas,
#png-container {
width: 800px;
height: 400px;
}<div>
//my svg element
<svg xmlns='http://www.w3.org/2000/svg' width='526' height='233' style='width: 100%; height: 100%; overflow: hidden; display: block; min-height: 431px; min-width: 481px;'><g><g /><g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='235' cy='268' rx='7.5' ry='7.5' /><path visibility='hidden' fill='none' pointer-events='stroke' stroke='white' stroke-miterlimit='10' stroke-width='9' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /><path fill='none' stroke='#000000' stroke-miterlimit='10' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><path fill='#ffffff' pointer-events='all' stroke='#000000' stroke-miterlimit='10' d='M 280 60 L 340 60 L 370 100 L 340 140 L 280 140 L 250 100 Z' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><rect fill='#ffffff' pointer-events='all' stroke='#000000' x='400' y='200' width='80' height='80' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='425' cy='390' rx='40' ry='40' /></g></g><g /><g /></g></svg>
</div>
<a href="#">save</a>
<br/>
<canvas id="canvas" width="800" height="400"></canvas>
<div id="png-container"></div>关于javascript - 如何将 svg 转换为 png 并保存在 ie 11 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51536186/