logo标签列表

将包含在SVG中的图像绘制到画布上。

javascripthtmlcanvassvg
4

enter image description here

<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>

在使用给定的代码转换为Canvas时

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 /打印/ PDF功能？
@RobertLongson 代码已添加 - user5198181
2个回答
0

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

});

画布已添加。由于它被隐藏了，您看不到它。 在此处查看 点击 的演示代码。
1
@AkhilSahu 代码片段返回错误，因为文件未被包含。 - Lucky
0

以下是一些测试：

http://jsfiddle.net/MxHPq/140/

看起来只有作为数据URI嵌入到SVG中的图像才可以在画布上绘制（例如这个示例中的红点）：

<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" >
    ...
    <image id="embedded" x="80" y="70"  width="20"  height="20"  xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>

这里有一个在线工具，可以将图像转换为数据URI： http://duri.me/

1
我需要一个JavaScript的解决方案。注：没有在线工具可以帮助。 - user5198181
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接