我成功地将png图像转换为数据uri,然后将这些数据注入到html元素中。
//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
$("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
// data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})
这证明数据uri是正确的。
但由于某种原因,我找不到任何方法在客户端dataviz中使用d3js,因此数据uri最终显示预期的光栅图像。有些东西阻止它发挥作用。
//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
var width = 500, height = width/2;
var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
svg.attr(':xmlns','http://www.w3.org/2000/svg')
.attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
var g = svg.append("g").append("image")
.attr("width", width / 2)
.attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})
我怀疑本机d3js xmlns名称空间中存在冲突,或者我输入了错字?有我的小提琴http://jsfiddle.net/xGUsu/106/。 有什么想法吗?
(与Why is my base64-encoded png not visible inside my svg? JS: how to encode an image.png into base64 code for data URI embedding?相关)
答案 0 :(得分:6)
两个错误:
不需要这些行并导致错误(请参阅控制台):
svg.attr(':xmlns','http://www.w3.org/2000/svg')
.attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
(除了前面的:
显然是错误的。xmlns
在XML中没有:
时编写
其次,您忘记为<image>
元素设置高度:
var g = svg.append("g").append("image")
.attr("width", width / 2)
.attr("height", height )
.attr("xlink:href", "data:image/png;base64," + data);