Question

我正在开发一个PHP脚本，我需要将SVG转换为png并节省CPU使用率和服务器负载，最好在客户端站点（浏览器）中进行转换，这是可行的只有Javascript。 Html代码：

    <div>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg"><image height="420" width="800" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/76/Tabby_cat-hello.jpg" transform="matrix(1 0 0 1 0 0)" class="draggable" type="staticimg" id="1465449556528" ></image> </svg>
    <a id='imgId'>Save</a>
</div>
<canvas></canvas>

Javascript代码：

    var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg),
    blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
    url = window.URL.createObjectURL(blob);

var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = 730;
    canvas.height = 300;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, 730, 300);

    window.URL.revokeObjectURL(url);
    var canvasdata = canvas.toDataURL('image/png');
    var a = document.getElementById('imgId');
    a.download = "export_" + Date.now() + ".png";
    a.href=canvasdata;   
}
img.src = url

svg工作只是找到但我不能转换为png。 JSFIDDLE：http://jsfiddle.net/vyLtxgh4/6/

Answer 1

在您的代码之上构建，我想出了以下代码段。

请参阅下面的 HTML 和 JavaScript 代码段
the same code in jsFiddle can be found here
最后可以找到 stackoverflow-embedded snippets 中的相同代码（向下滚动）

解决方案并不完美，但我认为它可以作为您继续开发的起点。

<强> HTML

首先，我正在使用需要加载的其他JavaScript库。可在此处找到：Javascript SVG parser and renderer on Canvas

<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>

然后你的原始代码会有一些重新格式化和一个额外的画布元素。

<div>
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg">
        <image height="420" width="800" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/76/Tabby_cat-hello.jpg" transform="matrix(1 0 0 1 0 0)" class="draggable" type="staticimg" id="1465449556528" ></image> 
    </svg>
    <a id="imgId" download="Canvas.png" href="#">Save</a>
</div>
<canvas id="canvas" width="730px" height="300px"></canvas>

<强>的JavaScript

第二个，在JavaScript部分中，我使用加载的canvg.js库将序列化的svg代码写入画布。然后将函数downloadCanvas()附加为imgId超链接元素上的单击事件侦听器。因此，只能按需完成对数据网址字符串的潜在代价转换（=点击）。

var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg);
svg.remove();

// write serialized svg to canvas
canvg('canvas', svg_xml, {useCORS: true});

// create canvas data on demand
function downloadCanvas() {
    this.href = canvas.toDataURL('image/png');
};
document.getElementById('imgId').addEventListener('click', downloadCanvas, false);

Stackoverflow代码段

＆＃13;

var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg);
svg.remove();

canvg('canvas', svg_xml, {
  useCORS: true
});

function downloadCanvas() {
  this.href = canvas.toDataURL('image/png');
};
document.getElementById('imgId').addEventListener('click', downloadCanvas, false);

＆＃13;

<script src="http://gabelerner.github.io/canvg/canvg.js"></script>
<div>
  <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg">
    <image height="420" width="800" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/76/Tabby_cat-hello.jpg" transform="matrix(1 0 0 1 0 0)" class="draggable" type="staticimg" id="1465449556528"></image>
  </svg>
  <a id="imgId" download="Canvas.png" href="#">Save</a>
</div>
<canvas id="canvas" width="730px" height="300px"></canvas>

＆＃13;

使用javascript

1 个答案: