Как я могу добавить элемент <image> в SVG DOM
У меня есть веб-страница с изображением jpg, на которой пользователь рисует SVG-каракули поверх Raphael.
Я хочу позволить пользователю сохранить объединенную растеризованную версию этого, когда они будут сделаны (я буду делать что-то еще с версией SVG самостоятельно)
Когда пользователь нажимает кнопку «Сохранить», я хочу добавить это фоновое изображение в сгенерированный SVG DOM в качестве элемента, а затем использовать canvg для записи SVG в элемент canvas. Наконец, я использую метод toDataUrl (), чтобы превратить его в JPG.
Я не могу получить средний бит для работы & # x2014; как лучше всего добавить изображение в DOM? Когда я использую приведенный ниже код, я получаю ошибку JavaScript, которая говорит, что appendChild () не является функцией.
Мне интересно, связано ли это с тем, как я получаю SVG с помощью метода .html () & # x2014; возможно, то, что возвращается, не интерпретируется как настоящий документ SVG ??
Любая помощь высоко ценится.
function saveImage(){
var img = document.getElementById('canvas').toDataURL("image/png");
window.open(img,'Download');
}
$('#save').click(function(){
var svg = $('#editor').html();
// Create new SVG Image element. Must also be careful with the namespaces.
var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg");
// Append image to SVG
svg.appendChild(svgimg);
canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true});
});