SVG到PNG图像不起作用(文本作品)

时间:2019-06-13 09:30:38

标签: svg canvas

示例

https://codepen.io/AlexandrM/pen/ydNxKr

当我将文本转换为png时,一切正常

当我将图像转换为png时,图像为空

简单代码

<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"> 
</script>
var canvas = document.createElement('canvas');
canvas.height = 300;
canvas.width = 300;

var svgImg = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><image x="0" y="0" width="300" height="300" preserveAspectRatio="none" xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" style="-webkit-tap-highlight-color: rgba(10, 10, 10, 10);" transform="matrix(1,0,0,1,0,0)"></image></svg>';

var svgText = '<svg xmlns="http://www.w3.org/2000/svg" width="218.51690425723103" height="220.3362028757222" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="50" y="50" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;" transform="matrix(0.8832,0.9803,-3.0354,2.7349,222.1078,-55.757)" stroke-width="0.24475524475524477"><tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="-8.5">SOME TEXT </tspan > <tspan dy="12" x="50" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">DATE: 2019-06-13 12:06:31</tspan> <tspan dy="12" x="50" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">END</tspan></text ></svg >';

canvg(canvas, svgImg);
var targetImg = document.createElement('img');
targetImg.src = canvas.toDataURL('image/png');
$('body').append('<p>IMAGE AS SVG</p>');
$('body').append(svgImg);
$('body').append('<p>IMAGE AS IMAGE</p>');
$('body')[0].appendChild(targetImg);

canvg(canvas, svgText);
targetImg = document.createElement('img');
targetImg.src = canvas.toDataURL('image/png');
$('body').append('<p>TEXT AS SVG</p>');
$('body').append(svgText);
$('body').append('<p>TEXT AS IMAGE</p>');
$('body')[0].appendChild(targetImg);

0 个答案:

没有答案
相关问题