1

我尝试将 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

4

1 回答 1

1

您可以在不使用任何插件的情况下使用如下代码：

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>

于 2018-07-26T10:13:29.233 回答