Javascript 将带有图像模式和剪贴画的SVG转换为PNG
我需要将svg转换为png。我试着使用这个代码Javascript 将带有图像模式和剪贴画的SVG转换为PNG,javascript,svg,png,Javascript,Svg,Png,我需要将svg转换为png。我试着使用这个代码 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke: #000; fill-opacity: .8; } </style> <body> <div id="svg"> <?php include 'small.svg'; ?> </div>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<div id="svg">
<?php include 'small.svg'; ?>
</div>
<button id="save">Save as Image</button>
<h2>SVG dataurl:</h2>
<div id="svgdataurl"></div>
<h2>SVG converted to PNG dataurl via HTML5 CANVAS:</h2>
<div id="pngdataurl"></div>
<canvas width="960" height="500" style="display:none"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
// Now is done
console.log( canvas.toDataURL( "image/png" ) );
};
document.getElementById("pngdataurl").appendChild(img);
</script>
路径{
行程:#000;
填充不透明度:.8;
}
另存为图像
SVG数据URL:
通过HTML5画布将SVG转换为PNG数据URL:
var svg=document.querySelector(“svg”);
var svgData=新的XMLSerializer().serializeToString(svg);
var canvas=document.createElement(“canvas”);
var ctx=canvas.getContext(“2d”);
var img=document.createElement(“img”);
setAttribute(“src”,“数据:image/svg+xml;base64,”+btoa(svgData));
img.onload=函数(){
ctx.drawImage(img,0,0);
//现在完成了
log(canvas.toDataURL(“image/png”);
};
document.getElementById(“pngdataurl”).appendChild(img);
但它不起作用。我很确定这是因为我使用了图像模式、rect和剪辑路径来制作SVG。我之所以这么说,是因为我用path对象尝试了这段代码,结果很好。我还尝试在代码中使用图像魔术
<?php
error_reporting(E_ALL);
$svg ="small.svg";
$mask = new Imagick('mask.png');
$im = new Imagick();
//$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svg);
$im->setImageFormat("png32");
$im->compositeImage( $mask, imagick::COMPOSITE_DEFAULT, 0, 0 );
header('Content-type: image/png');
echo $im;
?>
致命错误:在/home/[path to file]:10堆栈跟踪:#0/home/path to file:Imagick->readimageblob('small.svg')#第10行的/home/[path to file]中抛出未捕获的异常“imagickeption”,消息“此图像格式没有解码委托”@error/blob.c/BlobToImage/346
如果可能的话,我宁愿用js来做这件事。请帮帮我…我老板现在真的很讨厌我。这是我的svg
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 3384.2 2608.6" enable-background="new 0 0 3384.2 2608.6" xml:space="preserve">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/71/Weaved_truncated_square_tiling.png" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<rect width="3384.2" height="2608.6" clip-path="url(#shirt)" fill="url(#img1)" />
<clipPath id="shirt">
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#img1)" d="[coordinates that are too long for this post ]"/>
</clipPath>
</svg>
我最近也遇到了这个问题,至少在填充图案时是这样-远程图像似乎有问题,因此如果您将它们编码到数据URL中,它可以正常工作:
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
var patternImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
patternImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL());
};
img.src = patternImageUrl;
然后,您可以在模式def中添加/更新此图像(或者执行一次,然后将canvas.toDataURL()的结果硬编码到模式图像href中)