Javascript 如何在谷歌图表中获得svg中包含图像的png（base64）？

如何使用svg中的图像获取base64？检查我从另一个问题得到的这个。如果您看到第二个图形，它不会生成覆盖该条的图像

var chart = new google.visualization.ColumnChart(document.getElementById('chart_survey'));

$("[fill='#FFFFFF']").each(function( index, element ) {
    var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
    svgimg.setAttributeNS(null,'x',element.x.baseVal.value);
    svgimg.setAttributeNS(null,'y',element.y.baseVal.value);
    svgimg.setAttributeNS(null,'width',element.width.baseVal.value);
    svgimg.setAttributeNS(null,'height',element.height.baseVal.value);
    svgimg.setAttributeNS(null,'preserveAspectRatio','none');
    svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', '${application.contextPath}/images/textura/patt.gif');
    $(element).parent().append(svgimg);
});

$('#test').val(chart.getImageURI())

---

本例创建一个由图像填充的svg容器。在我的示例中，图像是svg图像，但您应该能够放入任何类型的图像（jpg、png、gif）。首先创建容器，然后在容器内创建图像

 // create svg
                var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
                svg.setAttribute('class','shadowed handle_icon_sensors');
                svg.setAttribute('height','25');
                svg.setAttribute('width','25');
                svg.setAttribute('id',idAttr);
                svg.setAttribute('z-index','21000');
                document.getElementById("zones_container").appendChild(svg);

            // create svg image
            var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
            svgimg.setAttribute('height','25');
            svgimg.setAttribute('width','25');
            svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','svg/icon_sensorYellow.svg');
            svgimg.setAttribute('x','0');
            svgimg.setAttribute('y','0');
            document.getElementById(idAttr).appendChild(svgimg);

---

注意，当转换为

img

元素的

src

时，保留

蓝色
背景色

在
.each（）之后重试

jsiddle
为了将此svg保存到png，该png保留链接的
，您必须首先将每个
的
href
编码到一个数据URL

编辑
我重写了原始片段（仍然可以在编辑历史中找到）


我将
标记更改为
。这将导致更小的内存使用

我还为IE11添加了一个后备方案，它接受将外部图像编码为数据URL，但仍然无法通过画布将svg转换为png。
回退将替换目标

symbol.setAttributeNS（null，'viewBox'，'0,0,10,10'）；
symbol.setAttributeNS（null，'preserveAspectRatio'，'none'）；
symbol.id='background'；
//和实际的图像，与我们的编码图像
var img=document.createElements（'http://www.w3.org/2000/svg","形象",；
img.setAttributeNS（null，'preserveSpectratio'，'none'）；
img.setAttributeNS（null，'width'，'100%'）；
img.setAttributeNS（空，“高度”，“100%”）；
图像设置属性（'http://www.w3.org/1999/xlink“，”href'，imgUrl）；
符号。附加子对象（img）；
svgNode.appendChild（符号）；
var blueRects=$（“[fill='#3366cc']”）；
var max=blueRects.length-1；
blueRects.each（函数（索引、元素）{
var svgimg=document.createElements（'http://www.w3.org/2000/svg","使用",；
svgimg.setAttributeNS（null，'x'，element.x.baseVal.value）；
svgimg.setAttributeNS（null，'y'，element.y.baseVal.value）；
setAttributeNS（null，'width'，element.width.baseVal.value）；
setAttributeNS（null，'height'，element.height.baseVal.value）；
svgimg.setAttributeNS（'http://www.w3.org/1999/xlink“，”href“，”背景“；
svgNode.appendChild（svgimg）；
if（index==max&&！istained）//如果没有数据URL编码的图像，则无需调用它
//加载事件会更好，但不会在IE中触发。。。
setTimeout（exportSVG.bind（this，svgNode，callback，istained），200）；
});
}
函数exportSVG（svgNode、回调、isTainted）{
var svgData=（新的XMLSerializer（））.serializeToString（svgNode）；
var img=新图像（）；
img.onload=函数（）{
var canvas=document.createElement（'canvas'）；
canvas.width=svgNode.getAttribute（'width'）；
canvas.height=svgNode.getAttribute（'height'）；
canvas.getContext（'2d'）.drawImage（this，0，0）；
var数据，isTainted；
试一试{
data=canvas.toDataURL（）；
}捕获（e）{
数据=画布；
isTainted=真；
}
回调（数据，isTainted）；
}
img.src='data:image/svg+xml；charset=utf8'，+encodeURIComponent（svgData）；
}
//将图像的url转换为base64数据url的简单函数
函数getbase64URI（url，回调）{
var img=新图像（）；
img.crossOrigin=“匿名”；
img.onload=函数（）{
var c=document.createElement（'canvas'）；
c、 宽度=此宽度；
c、 高度=此高度；
c、 getContext（'2d'）.drawImage（this，0，0）；
var Istated；
试一试{
c、 toDataURL（）；
}捕获（e）{
isTainted=真；
}
//如果画布被污染，请返回url
变量输出=（isTainted）？url:c.toDataURL（）；
drawVisualizationDaily（输出、回调、isTainted）；
}
img.src=url；
}
svg{边框：1px纯黄色；}
img{边框：1px纯绿色；}
画布{边框：1px纯红；}

右键单击此图像以保存它：


此html在react中工作

 <a
    href={chart.getImageURI()}
    download="chart.png">
    getImage
  </a>


我没有完全正确，你的意思是，我有图形，你的
var svg=…
将再次转换为svg（我的图形）到一个新图形，然后我得到我想要的图像？关键是你必须创建svg容器（//创建svg），然后在其中创建图像（//创建svg图像）。我指的是我的图像“'svg/icon_sensorYellow.svg'”是一个svg图像。但是任何其他的网络图像也应该起作用。“idAttr”是由我的代码创建的，用于在for循环中创建多个实例，但您选择的任何id都可以使用。只需将变量设置为您的id。您能帮我使用小提琴吗？我尝试使用提供svg的url，但没有生成图像。是否在图表顶部的条形图上显示图像？是否要求将相同的图像应用于下方图表？似乎没有尝试在jsfiddle上检索
base64
？是的，图像似乎是顶部图表。是的，它的要求，因为我想要的不是颜色，而是图像，所以我把它放在顶部。但是当我检索base64时，图像不在那里。无法利用已填充条的
image
？
base64
和现有的图像链接有什么区别？请参阅文章。在重新查看问题后，相信需求是从
svg
元素创建
png
图像？已尝试，但未保留颜色栏的链接图像。创建了
svg
的
数据URI
，当加载到浏览器中时，它保留了条形图上的链接图像。请参见svg未正确呈现，
此页面包含以下错误：第1列第1行错误：编码错误
@fsi有趣，此处未收到错误通知；无论是在打开的
窗口
还是在
控制台
上的
数据URI
？浏览器在？@fsi上试过
js
，在chrome上试过，chrome，每晚没有
 <a
    href={chart.getImageURI()}
    download="chart.png">
    getImage
  </a>