экспорт SVG в PNG с изображением внутри SVG

Question

Я пытаюсь создать сайт, на котором вы можете нарисовать изображение поверх другого изображения, используя Raphael.js. Детали чертежа закончены, и я могу экспортировать строки в виде png. Я вставляю изображения в SVG raphael, генерируя функцию paper.image(); К сожалению, моя функция экспорта не включает импортированное изображение.

Это скрипты, которые я использую, но я не думаю, что использую их все.

<script src="../jquery-2.0.1.min.js"></script> 
<script src="raphael-min.js"></script> 
<script src="rgbcolor.js"></script> 
<script src="canvg.js"></script> 
<script src="StackBlur.js"></script> 
<script src="svg.min.js"></script> 

Вот экспорт функция $ ('# сохранить'). OnMouseDown ...

var canvas = document.getElementById('canvas2'); 
var svg = document.getElementById('canvas'); 
svg = svg.innerHTML; 
canvg(canvas, svg); 
var img_url = canvas.toDataURL('image/png'); 
$('#converted_image').attr('src', img_url); 
var img = canvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>'); 

Вот как я импортировать изображения с помощью кнопки, которая представляет собой изображение $('#img1').onmousedown ...

paper.clear(); 
var c = paper.image("images/img1.png", 10, 10, 200, 200); 

Вот как выглядит результат в домике с изображением и белой линией в качестве примера.

<div id="canvas"> 
    <svg height="300" version="1.1" width="300" 
     xmlns="http://www.w3.org/2000/svg" 
     style="overflow: hidden; position: relative; " id="canvassvg"> 
     <desc>Created with Raphaël 2.1.0</desc> 
     <defs></defs> 
     <image x="10" y="10" width="200" height="200" 
       preserveAspectRatio="none" href="images/img1.png"> 
     </image> 
     <path style="stroke-linecap: round; stroke-linejoin: round; " 
       fill="none" stroke="#ffffff" 
       d="M383,201L383,201L383,202L383,203" 
       stroke-linecap="round" stroke-linejoin="round" stroke-width="4"> 
     </path> 
    </svg> 
</div> 

Спасибо за любой ответ, и, пожалуйста, извините, мой английский.

Answer 1

Я успешно сделал это с помощью Batik, который вы можете скачать здесь: http://xmlgraphics.apache.org/batik/tools/rasterizer.html

После того как вы SVG, это просто вопрос сохранения SVG в файл и передать его в батике, и вы сделанный! Выдает очень красивый PNG (и даже работает, когда изображения включены удаленно).

Answer 2

Вы пробовали метод Canvas drawImage()?

Пример здесь: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

Answer 3

Ответ предложил here работал для меня!

После определения вашего объекта Рафаэль, вы должны сделать что-то вроде:

raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink"); 

Answer 4

Я ДУМАЮ ЭТО ДОЛЖНО БЫТЬ РАБОТА

<div id="forsvgtopng"> 
      <div id="svgelemntdiv"> 
       <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/> 
      </svg> 
     </div> 
     <div class="canvasdiv"> 
      <canvas ></canvas> 
     </div> 
    <div class="pngdiv"> 
     <img id="svgpng" /> 
    </div> 
</div> 

Вызвать Javascript функция как convertsvg ('# forsvgtopng')

function convertsvg(selectors) { 
     [].forEach.call(document.querySelectorAll(selectors), function (div) { 
     try { 

      var sourceImage; 
      var imgs = document.getElementById('svgpng'), 
       svg = div.querySelector('svg'), 
       can = div.querySelector('canvas'), 
       ctx = can.getContext('2d'); 
       can.width =500; 
       can.height = 550; 

      sourceImage = new Image; 
      sourceImage.width = can.width; 
      sourceImage.height = can.height; 
      sourceImage.onload = function() { 
       ctx.drawImage(sourceImage,80,90); 

       imgs.src = can.toDataURL(); 
      }; 

      sourceImage.src = svg ? svgDataURL(svg) :""; 
     } catch (e) { console.log(e) } 
    }); 
}} 


     function svgDataURL(svg) { 

    var svgAsXML = (new XMLSerializer).serializeToString(svg); 
    return "data:image/svg+xml," + encodeURIComponent(svgAsXML); 
}