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

Question

我通过核心api确定“svgCanvas.importImage(url)”方法可以导入base64编码的图片。

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

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

Does SVG support embedding of bitmap images?

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);
   
   }