base64 - 如何使用嵌入式 API 在 svg-edit 中导入图像/光栅

Question

我使用核心api确定方法“svgCanvas.importImage(url)可以导入base64编码的图像。

但是嵌入式 API 并没有公开这个私有的方法。看来我也不能使用该方法使用的任何方法（svgFromgJson 等）。

有没有人对我如何在嵌入式 svg-edit 启动时加载代表图像的 base 64 字符串有建议？我正在考虑将该字符串包装在模拟 svg 文件中的 < image> 标记中并以这种方式导入..

SVG 是否支持嵌入位图图像？

Answer 1

修改现有代码，根据我原来的问题中的答案，我修改了他们的示例导入，它工作得非常好。

1. 在您的页面中包含 embedapi.js
2. 定义一个 iframe 以显示 svg-edit

3. 在 iframe 的 onload 事件中调用如下代码函数

   // call onLoad for the iframe
    var frame = document.getElementById('svgedit');
       svgCanvas = new embedded_svg_edit(frame);
   
    // Hide main button, as we will be controlling new/load/save etc from the host document
    var doc;
    doc = frame.contentDocument;
    if (!doc)
    {
      doc = frame.contentWindow.document;
    }
   
     var mainButton = doc.getElementById('main_button');
     mainButton.style.display = 'none';            
     var embeddedImage='<image xlink:href="data:image/png;base64,..OMITTED FOR BREVITY.." id="svg_2" height="128" width="128" y="0" x="0"/>';
   
     var svgDef = '<svg width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title>' + embeddedImage +  '</g></svg>';
      svgCanvas.setSvgString(svgDef);
   
   }