svg-edit - set background dynamically - svg-edit

Question

I'm looking at using svg-edit to annotate images in a browser. The image is uploaded on the same page the svg-edit is embedded in and needs to be set dynamically on upload as the background for svg-edit. Can this be done?

Answer 1

You have to call the method of the object i.e svgCanvas.setBackground();
For this you can create an extension e.g : ext-backchange.js
this file look likes this:
svgEditor.addExtension("changeback", function() {
svgCanvas.setBackground('','abc.png');
return {};
});
Then include this extension in svg-edit.js as in the last line :
svgEditor.setConfig(
{
extensions: ['ext-backchange.js']
})

Answer 2

You can use setImageBackground(imageBackground) function
setImageBackground("image.png");
and add this function setImageBackground in svgcanvas.js This image appear on the canvas and can be rotated.
this.setImageBackground= function(val) {
var elem = addSvgElementFromJson({
"element": "image",
"attr": {
"x": ( svgcontent.getAttribute('x') - bgimg_with ) / 2,
"y": ( svgcontent.getAttribute('y') - bgimg_height ) / 2,
"width": bgimg_with,
"height": bgimg_height,
"id": 'ImgBckgd',
"opacity": 1,
"style": "pointer-events:inherit",
}
});
setHref(elem, last_good_img_url);
preventClickDefault(elem);
if(!elem) return;
var attrs = $(elem).attr(['width', 'height']);
var setsize = (!attrs.width || !attrs.height);
var cur_href = getHref(elem);
// Do nothing if no URL change or size change
if(cur_href !== val) {
setsize = true;
} else if(!setsize) return;
var batchCmd = new BatchCommand("Change Image URL");
setHref(elem, val);
batchCmd.addSubCommand(new ChangeElementCommand(elem, {
"#href": cur_href
}));
if(setsize) {
$(new Image()).load(function() {
var changes = $(elem).attr(['width', 'height']);
$(elem).attr({
width: this.width,
height: this.height
});
selectorManager.requestSelector(elem).resize();
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
addCommandToHistory(batchCmd);
call("changed", [elem]);
}).attr('src',val);
} else {
addCommandToHistory(batchCmd);
}
};