Question

我想将svg转换为base64图像。 btoa（xml）没有生成正确的图像。

请在此处找到代码jsFiddle Demo

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

任何人都可以帮我吗？提前致谢

Answer 1

编码很好。 SVG中的style属性会导致您的问题。删除它，事情变得更好。

另外，你的小提琴是在base64编码之前对XML进行不必要的编码。你不需要那个。

var svg64 = btoa(xml);

很好。

请参阅：https://jsfiddle.net/h2L3gw88/425/

Answer 2

在LeBeau's answer上展开一点：

使用SVG元素上的width/height和viewBox代替CSS样式，使所有内容都适合图像。
<svg ... width="700" height="160" viewBox="-40,-120, 700,160">
等到img加载到画布之前，否则无法绘制任何内容 img.onload = e => canvas.getContext('2d').drawImage(img, 0, 0);

https://jsfiddle.net/h2L3gw88/437/

SVG没有生成正确的base64图像

2 个答案: