Question

我在d3图表中嵌入了一个图像，如example：

  var logoCanvas = d3.select("body").append("canvas")
    .attr("id", "newCanvas")
    .attr("width", width / 2)
    .attr("height", height / 2)
    .node();

  var context = logoCanvas.getContext("2d");
  var imageObj = new Image();
  imageObj.src = 'myImage.svg';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    var imageData = document.getElementById("newCanvas").toDataURL("image/png")
    //Add as SVG image element
    d3.select("svg").
    append("image")
      .datum(imageData)
      .attr("height", 100)
      .attr("width", 100)
      .attr('transform', 'translate(' + [offsetX - 50, offsetY - 50] + ')')
      .attr("xlink:href", function(d) {
        return d
      })
  }

这可以按预期工作，但不幸的是我将图像显示两次。基本上我只需要附加的一个而不是绘制到上下文中的一个。事情是我无法先得到附加的那个。

有没有办法隐藏在上下文中绘制的图像？

还是一种更智能的方法，只显示一个图像但嵌入了？

Answer 1

以下是获取图片并“嵌入”SVG的$scope.$watch('document.fileName', function(newValue, oldValue) { //if(newValue not valid) // display validation error });和XMLHTTPRequest()方法的code摘要。你根本不需要画布。

FileReader()

// append svg
d3.select("body").append("svg").attr("height", "300px").attr("width", "276px");

var xhr1 = new XMLHttpRequest();
xhr1.open('GET', 'https://s7.postimg.org/40f9flc1n/dummy1.png');
xhr1.responseType = 'blob';
xhr1.onload = function () {
  var fs = new FileReader();
  fs.onload = function (result) {
    d3.select("svg").append("image")
      .datum(result.target.result)
      .attr("height", 300)
      .attr("width", 276)
      .attr("xlink:href", function(d) {
        return d
      })
  };
  fs.readAsDataURL(xhr1.response);
};
xhr1.send();

希望这会有所帮助。：）

d3嵌入图像显示两次

1 个答案: