Javascript 如何添加<;图像>;元素添加到SVG DOM中
我有一个带有jpg图像的网页,用户使用Raphael在上面画一个SVG涂鸦 我想允许用户在完成后保存合并的光栅化版本(我将自己用SVG版本做其他事情) 当用户单击“保存”时,我想将该背景图像作为元素添加到生成的SVG DOM中,然后使用canvg将SVG写入画布元素。最后,我使用toDataUrl()方法将其转换为jpg 我无法使用中间的部分-将图像添加到DOM的最佳方法是什么?当我使用下面的代码时,我得到一个javascript错误,表示appendChild()不是函数 我想知道这是否与我如何使用.html()方法获取SVG有关-可能返回的内容没有被解释为真正的SVG文档 非常感谢您的帮助Javascript 如何添加<;图像>;元素添加到SVG DOM中,javascript,jquery,svg,raphael,Javascript,Jquery,Svg,Raphael,我有一个带有jpg图像的网页,用户使用Raphael在上面画一个SVG涂鸦 我想允许用户在完成后保存合并的光栅化版本(我将自己用SVG版本做其他事情) 当用户单击“保存”时,我想将该背景图像作为元素添加到生成的SVG DOM中,然后使用canvg将SVG写入画布元素。最后,我使用toDataUrl()方法将其转换为jpg 我无法使用中间的部分-将图像添加到DOM的最佳方法是什么?当我使用下面的代码时,我得到一个javascript错误,表示appendChild()不是函数 我想知道这是否与我如
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});
});
以下是一种方法:
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'height','200');
svgimg.setAttributeNS(null,'width','200');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'myimage.jpg');
svgimg.setAttributeNS(null,'x','10');
svgimg.setAttributeNS(null,'y','10');
svgimg.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(svgimg);
不起作用,添加了图像标记,但没有进行网络调用,我在这里使用的不是jquery,而是本机元素