4xx / svg-edit

Automatically exported from code.google.com/p/svg-edit
MIT License
0 stars 0 forks source link

Save image with background image? #1260

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
I want to save background image as well as edit image.
is there any way in svg-edit!!!  

What is the expected output? What do you see instead?

With out background-image.

In what browser did you experience this problem? (ALL, Firefox, Opera, etc)
All

In what version of SVG-edit does the problem occur? (Latest trunk, 2.7.1,
etc)
2.7.1

Please provide any additional information below.

Original issue reported on code.google.com by duraik3 on 21 Jan 2015 at 5:27

GoogleCodeExporter commented 9 years ago
My Solution:
At setBackground() method [svgcanvas.js], instead of change attribute elements 
(rect, image) at #canvasBackground, you could rewrite here.
I create a new layer, background element will save here, send it to bottom, 
change currentLayer to other one.

Original comment by hth.tun...@gmail.com on 23 Jan 2015 at 7:25

GoogleCodeExporter commented 9 years ago
@thth.tun.. thanks for your response, can you give sample code!

Original comment by duraik3 on 23 Jan 2015 at 8:02

GoogleCodeExporter commented 9 years ago
this.setBackground = function(color, url) {
    /*var bg = svgedit.utilities.getElem('canvasBackground');
    var border = $(bg).find('rect')[0];
    var bg_img = svgedit.utilities.getElem('background_image');
    border.setAttribute('fill', color);
    if (url) {
        if (!bg_img) {
            bg_img = svgdoc.createElementNS(NS.SVG, "image");
            svgedit.utilities.assignAttributes(bg_img, {
                'id': 'background_image',
                'width': '100%',
                'height': '100%',
                'preserveAspectRatio': 'xMinYMin',
                'style':'pointer-events:none'
            });
        }
        setHref(bg_img, url);
        bg.appendChild(bg_img);
    } else if (bg_img) {
        bg_img.parentNode.removeChild(bg_img);
    }*/
    // 22-01-2015 customJS
    var content = svgedit.utilities.getElem('svgcontent');
    var currentBG = $('g[id=bg]',content);
    var bg;
    if (url) {
        bg = svgdoc.createElementNS(NS.SVG, "image");
        svgedit.utilities.assignAttributes(bg, {
            'id': 'background_image',
            'data-lock': 1,
            'data-unlockable': 1,
            'width': '100%',
            'height': '100%',
            'preserveAspectRatio': 'xMinYMin',
            'style':'pointer-events:none'
        });
        setHref(bg, url);
    } else {
        bg = svgdoc.createElementNS(NS.SVG, "rect");
        svgedit.utilities.assignAttributes(bg, {
                'id': 'background_image',
                'width': '100%',
                'height': '100%',
                'data-lock': 1,
                'data-unlockable': 1,
                'x': 0,
                'y': 0,
                'stroke': color,
                'fill': color,
                'style':'pointer-events:none'
            });
    }
    if( currentBG.length ) {
        currentBG.remove();
    }
    var batchCmd = new svgedit.history.BatchCommand("Create Layer");
    var new_layer = getCurrentDrawing().createLayer("Background");
    batchCmd.addSubCommand(new svgedit.history.InsertElementCommand(new_layer));
    addCommandToHistory(batchCmd);
    clearSelection();
    call("changed", [new_layer]);
    var layer = getCurrentDrawing().getCurrentLayer();
    layer.setAttribute("id","bg");
    layer.appendChild(bg);
    canvas.setCurrentLayerPosition(0);
    var allLayers = getCurrentDrawing().all_layers;
    for(i in allLayers) {
        if( allLayers[i][0] == 'Background'  ) continue;
        getCurrentDrawing().setCurrentLayer(svgedit.utilities.toXml(allLayers[i][0])); break;
    }
    // End
};

Original comment by hth.tun...@gmail.com on 24 Jan 2015 at 3:55

GoogleCodeExporter commented 9 years ago
@thth.tun.. thanks , i'll try this.

Original comment by duraik3 on 24 Jan 2015 at 8:11