将嵌入式SVG转换为png时出现样式错误

Chuanqi Sun 发表于 Dev

Chuanqi Sun

我的高级目标是将<div>包含一些内嵌svg图像的元素转换为png文件。必须使用JavaScript在客户端浏览器中执行所有操作。我试过了：

使用canvg库并按照这篇文章中的步骤操作：https : //github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

原始svg：

结果：
<svg>按照本文中的步骤将css样式展平到标记中，然后调用canvg：将嵌入式SVG就地转换为PNG

结果：图像空白。
<svg>按照本文中的步骤将css样式展平到标记中，然后手动将svg绘制到画布上：如何从浏览器保存/导出使用css样式的内联SVG从浏览器到图像文件

结果：图像空白。
使用以下代码将CSS样式展平为嵌入式样式表：http : //spin.atomicobject.com/2014/01/21/convert-svg-to-png/

结果：图像空白。
使用svg撬杠手动将<div>元素下载为.svg文件。

结果：

然后，当我将原始svg的计算后的css与下载的svg进行比较时，我发现下载的svg具有正确的svg xml，但是内联样式表（<style type="text/css">）例如图表最右边的数字200、300与<text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text>我的外部CSS一起绘制，我有：

.scatterChart .axisGraphicsContext文本{font-size：8px; 填充：＃777; }

但是，下载的svg的内联样式表中没有font-size和fill属性。

人性化装

我一直在寻找自己的解决方案，以通过Rickshaw（基于D3）创建的CSS导出PNG。我发现的唯一解决方案是：

将DIV与SVG区别对待，并分别对待
将具有html2canvas的DIV（和其他非SVG内容）转换为canvas
使CSS内联到SVG；@thirdcreed已在以下位置发布了JavaScript代码和D3选择器：JSDOM中的人力车CSS /轴-根据需要将其调整为自定义CSS。

使用以下代码将SVG转换为画布

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html2);
var img = '<img src="'+imgsrc+'">';      
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");      
var image = new Image;
image.src = imgsrc;
image.onload = function() {
  context.drawImage(image, 0, 0);
}

将您拥有的不同画布合并为一个

使用以下代码将其转换为图像：

var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">'; 
d3.select("#pngdataurl").html(pngimg); // contains selector from D3, adjust if you don't use D3
var a = document.getElementById("some_anchor"); // Fix for Firefox: supply an anchor-tag here that is 'display:none' in your document, otherwise download won't work
a.download = "sample.png";
a.href = canvasdata;
a.click();

请注意，每个Internet Explorer浏览器都要求SVG具有xmlns属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。