Мне удалось преобразовать изображения png в uri данных, а затем ввести эти данные 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 данных.
Но по какой-то причине я не смог найти способ использовать d3js в dataviz на стороне клиента, поэтому 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/. Есть идеи?
(Относится к Почему мой png в кодировке base64 не отображается внутри моего svg? JS: как кодировать image.png в код base64 для встраивания URI данных? )