如何使用嵌入式API

Question

我確定使用核心的API，方法「svgCanvas.importImage（URL）可以導入base64編碼圖像，以導入SVG編輯的圖像/柵格。

但嵌入的API不公開這種私有方法，似乎我不能使用任何方法使用的方法（svgFromgJson等）。

有沒有人有關於如何加載基本64字符串代表圖像svg-edit啓動？我正在考慮將該字符串包裝在模擬svg文件中的< image>標記中，並以此方式導入。

Does SVG support embedding of bitmap images?

Answer 1

修改現有的代碼，根據我原來的問題中的答案我修改了他們的示例導入，它的工作原理非常奇妙。

1. 包括在你的頁面
2. 的embedapi.js定義一個iframe來顯示SVG編輯

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