svg-edit - установить динамически динамически

Question

Я ищу использование svg-edit для аннотирования изображений в браузере. Изображение загружается на ту же страницу, в которую встроено svg-edit, и динамически загружать его в качестве фона для svg-edit. Это можно сделать?

Answer 1

Вы должны вызвать метод объекта i.e svgCanvas.setBackground();

Для этого вы можете создать расширение, например: Ext-backchange.js

этот файл взгляд любит это:

svgEditor.addExtension("changeback", function() { 


svgCanvas.setBackground('','abc.png'); 

return {}; 
}); 

Затем включите это расширение в SVG-edit.js как в последней строке :

svgEditor.setConfig(
{ 

extensions: ['ext-backchange.js'] 

}) 

Answer 2

Вы можете использовать функцию setImageBackground (imageBackground)

setImageBackground("image.png"); 

и добавьте эту функцию setImageBackground в svgcanvas.js Это изображение появляется на холсте и может быть повернуто.

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