Question

如果有人上传了带有<input type="file"/>的图片，则有一百万种不同的方式可以将图片作为<img>元素添加到某个地方或<canvas>上。我希望在SVG中将其添加为<image>元素，我完全陷入困境。

如果我将上传的文件添加到画布并使用canvas.getDataURL（），我会获得一个有效的数据URL，我可以将其用作背景图像或其他任何内容。但是将xlink:href元素的<image>设置为该网址则不会执行任何操作。我还尝试直接添加文件而不使用画布步骤，例如：

$("#file").on("change",function(){
  $("image").attr("xlink:href",this.files[0]);
});

这似乎做了些什么，但图像仍无法显示。我有一个宽度和高度设置。我也尝试了各种Blob URL方法，但这些方法都没有做任何事情。

如何从文件输入中获取图像文件并将其显示为SVG中的<image>元素？

非常感谢任何帮助。

Answer 1

this.files [0]返回一个File对象。 xlink：href属性assigment采用字符串。 File对象自动转换为字符串会导致为属性分配字符串＆＃34; [object File]＆＃34;。

您可以将文件作为数据URL读取，然后将数据URL分配给href属性。正如Robert Longson在评论中所提到的，使用带有SVG属性的JQuery需要命名空间有时会导致问题。我建议使用普通DOM设置属性。例如......

var xlinkNS = "http://www.w3.org/1999/xlink";

$("#file").on("change",function(){
    var reader = new FileReader();
    reader.onload = function (e) {
      $("image")[0].setAttributeNS(xlinkNS, "href", e.target.result);
    };
    reader.readAsDataURL(this.files[0])
});

将上载的文件添加为SVG中的<img/>元素

1 个答案: