将上传的文件添加为 SVG 中的 <image> 元素

Question

如果有人上传带有 <input type="file"/> 的图片，有上百万种不同的方法可以将图片添加到某处作为 <img> 元素或添加到 <canvas> 上。我想将其添加为 SVG 中的 <image> 元素，但我完全受阻了。

如果我将上传的文件添加到 canvas 并使用 canvas.getDataURL()，我会得到一个有效数据 URL，我可以将其用作背景图片或其他任何东西。但是将 <image> 元素的 xlink:href 设置为那个 URL 没有任何作用。我也试过直接添加文件而不用 canvas 步骤，例如：

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

这似乎有所作为，但图像仍然无法显示。我在上面设置了宽度和高度。我还尝试了各种 Blob URL 方法，但这些方法都没有做任何事情。

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

非常感谢任何帮助。

Answer 1

this.files[0]returns一个文件对象。 xlink:href 属性赋值采用字符串。将 File 对象自动转换为字符串会导致为属性分配字符串“[object File]”。

您可以将文件作为数据 URL 读取，然后将数据 URL 分配给 href 属性。正如 Robert Longson 在评论中提到的，将 JQuery 与需要命名空间的 SVG 属性一起使用有时会导致问题。我建议使用纯 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 中的 <image> 元素

Adding an uploaded file as an <image> element in an SVG

javascript

svg

image

filereader