将具有图像模式和clipPath的SVG转换为PNG

Question

I need to convert a svg into a png. 我需要将svg转换为png。 I tried using this code 我尝试使用此代码

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

but it doenst work. 但是它确实起作用。 im pretty sure it's because im using an image pattern, rect and a clip path to product my SVG. 我非常确定这是因为我使用图像模式，矩形和剪切路径来生成我的SVG。 I say that because i tried this code with just the path object and it worked fine. 我这么说是因为我只使用path对象尝试了此代码，并且效果很好。 I also tried using image magic with this code 我也尝试使用此代码使用图像魔术

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

Fatal error: Uncaught exception 'ImagickException' with message 'no decode delegate for this image format `' @ error/blob.c/BlobToImage/346' in /home/[path to file]:10 Stack trace: #0 /home/path to file: Imagick->readimageblob('small.svg') #1 {main} thrown in /home/[path to file] on line 10 致命错误：/ home / [文件路径]中未捕获的异常'ImagickException'，消息为'此图像格式''的解码委托'@ error / blob.c / BlobToImage / 346'：10堆栈跟踪：＃0 / home /文件路径：imagick-> readimageblob（'small.svg'）＃1 {main}放在/ home / [文件路径]第10行

i would rather do this with js if possible. 如果可能的话，我宁愿使用js。 please help...my boss really hates me right now. 请帮助...我的老板现在真的很讨厌我。 Here is my svg 这是我的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>

Answer 1

I had this issue recently too, at least with the pattern fills - it seems to be an issue with remote images, so if you base64 encode them into a data URL, it works fine: 我最近也有这个问题，至少与模式填充有关-远程图像似乎是一个问题，因此，如果将base64编码为数据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;

You can then add/update this image in a pattern def (or do this once and hardcode the result of canvas.toDataURL() into the pattern image href). 然后，您可以在模式def中添加/更新该图像（或执行一次并将并将canvas.toDataURL（）的结果硬编码到模式图像href中）。

将具有图像模式和clipPath的SVG转换为PNG

问题描述

1 个解决方案

解决方案1
0 2016-07-06 18:11:51

将具有图像模式和clipPath的SVG转换为PNG

问题描述

1 个解决方案

解决方案1 0 2016-07-06 18:11:51

解决方案1
0 2016-07-06 18:11:51