将Svg绘制到画布上，包括嵌入到svg中的图像

user5198181 发表于 Dev

用户5198181

<html
><svg width="960" height="500" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="linz"><line class="bluelink" x1="480" y1="250" x2="334.8434764825239" y2="275.78849826638145"></line><rect x="397.42173824126195" y="252.89424913319073" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="407.42173824126195" y="262.8942491331907">101</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="619.1894601470176" y2="200.9990683994202"></line><rect x="539.5947300735088" y="215.4995341997101" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="549.5947300735088" y="225.4995341997101">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="434.983433226373" y2="390.53065260546134"></line><rect x="447.4917166131865" y="310.26532630273067" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="457.4917166131865" y="320.26532630273067">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="585.5868329731418" y2="353.5574331993295"></line><rect x="522.7934164865709" y="291.7787165996648" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="532.7934164865709" y="301.7787165996648">119</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="499.47384868808143" y2="103.87072365281172"></line><rect x="479.73692434404074" y="166.93536182640585" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="489.73692434404074" y="176.93536182640585">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="373.73145030208514" y2="147.4006224017257"></line><rect x="416.86572515104257" y="188.70031120086287" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="426.86572515104257" y="198.70031120086287">5</text></g><g class="node" transform="translate(334.8434764825239,275.78849826638145)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">111</text></g><g class="node" transform="translate(619.1894601470176,200.9990683994202)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">999</text></g><g class="node" transform="translate(434.983433226373,390.53065260546134)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">222</text></g><g class="node" transform="translate(585.5868329731418,353.5574331993295)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">XXX</text></g><g class="node" transform="translate(499.47384868808143,103.87072365281172)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">444</text></g><g class="node" transform="translate(373.73145030208514,147.4006224017257)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">333</text></g><g class="node" transform="translate(480,250)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/target.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">Main</text></g></svg>

使用给定代码覆盖画布

var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;
    
    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };
    
    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG
    alert("see console for output...");
});

尽管图像和链接显示在svg上，但画布上未显示任何链接或图像。如何做并添加jpg / svg / print / pdf功能？

幸运的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/akhilsahu/saveSvgAsPngJpgSvg/master/svg.js"></script>

saveSvAsPngJpgSvg.js

https://github.com/akhilsahu/saveSvgAsPngJpgSvg

太容易使用了。

可以调用简单函数来执行此操作。

svgAsPngUri(document.getElementById(svgid), {}, function(uri)
    {
        document.querySelector('#png-container').innerHTML = '<img id="getimg" style="display:none" src="'+uri+'"/>';
         
       var sampleImage = document.getElementById("getimg"),
          canvas = convertImageToCanvas(sampleImage);
      
      // Actions
       document.getElementById("canvasHolder").appendChild(canvas);

});

画布已添加。您看不到它是隐藏的。小提琴在这里点击

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。