使用PHP将SVG图像转换为PNG [英] Convert SVG image to PNG with PHP

问题描述

我正在开展一个网络项目，该项目涉及动态生成的美国地图，根据一组数据为不同的状态着色。

I'm working on a web project that involves a dynamically generated map of the US coloring different states based on a set of data.

SVG 文件给了我一张很好的美国空白地图，很容易改变每个州的颜色。困难在于IE浏览器不支持SVG，所以为了让我使用svg提供的方便语法，我需要将它转换为JPG。

This SVG file gives me a good blank map of the US and is very easy to change the color of each state. The difficulty is that IE browsers don't support SVG so in order for me to use the handy syntax the svg offers, I'll need to convert it to a JPG.

理想情况下，我只想使用GD2库，但也可以使用ImageMagick。我完全不知道如何做到这一点。

Ideally, I'd like to do this with only the GD2 library but could also use ImageMagick. I have absolutely no clue how to do this.

我们将考虑允许我动态更改美国地图上的状态颜色的任何解决方案。关键是它可以很容易地改变颜色并且它是跨浏览器的。请使用PHP / Apache解决方案。

Any solution that would allow me to dynamically change the colors of states on a map of the US will be considered. The key is that it is easy to change the colors on the fly and that it is cross browser. PHP/Apache solutions only, please.

推荐答案

你问这个很有趣，我最近刚刚为我的工作网站做了这件事我我以为我应该写一个教程...以下是如何用PHP / Imagick做的，它使用ImageMagick：

That's funny you asked this, I just did this recently for my work's site and I was thinking I should write a tutorial... Here is how to do it with PHP/Imagick, which uses ImageMagick:

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

/*loop to color each state as needed, something like*/ 
$idColorArray = array(
     "AL" => "339966"
    ,"AK" => "0099FF"
    ...
    ,"WI" => "FF4B00"
    ,"WY" => "A3609B"
);

foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
    $svg = preg_replace(
         '/id="'.$state.'" style="fill:#([0-9a-f]{6})/'
        , 'id="'.$state.'" style="fill:#'.$color
        , $svg
    );
}

$im->readImageBlob($svg);

/*png settings*/
$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1);  /*Optional, if you need to resize*/

/*jpeg*/
$im->setImageFormat("jpeg");
$im->adaptiveResizeImage(720, 445); /*Optional, if you need to resize*/

$im->writeImage('/path/to/colored/us-map.png');/*(or .jpg)*/
$im->clear();
$im->destroy();

步骤正则表达式颜色替换可能会有所不同，具体取决于svg路径xml以及你如何识别&存储颜色值。如果您不想在服务器上存储文件，可以将图像输出为基数64，如

the steps regex color replacement may vary depending on the svg path xml and how you id & color values are stored. If you don't want to store a file on the server, you can output the image as base 64 like

<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '"  />';?>

（在使用clear / destroy之前）但是因为PNG作为base64有问题所以你可能必须输出base64作为jpeg

(before you use clear/destroy) but ie has issues with PNG as base64 so you'd probably have to output base64 as jpeg

你可以在这里看到我为前雇主的销售区域地图做的一个例子：

you can see an example here I did for a former employer's sales territory map:

开始： https://upload.wikimedia.org /wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg

完成：

Finish:

编辑

Edit

自从编写以上内容后，我提出了两种改进的技术：

Since writing the above, I've come up with 2 improved techniques:

1）而不是正则表达式循环来改变填充state，使用CSS制作样式规则，如

1) instead of a regex loop to change the fill on state , use CSS to make style rules like

<style type="text/css">
#CA,#FL,HI{
    fill:blue;
}
#Al, #NY, #NM{
    fill:#cc6699;
}
/*etc..*/
</style>

然后您可以执行单个文本替换以将css规则注入svg，然后再继续执行想象jpeg / png创作。如果颜色没有变化，请检查以确保路径标记中没有任何内联填充样式覆盖css。

and then you can do a single text replace to inject your css rules into the svg before proceeding with the imagick jpeg/png creation. If the colors don't change, check to make sure you don't have any inline fill styles in your path tags overriding the css.

2）如果你不喜欢实际上必须创建一个jpeg / png图像文件（并且不需要支持过时的浏览器），你可以直接用jQuery操作svg。使用img或object标签嵌入svg时无法访问svg路径，因此您必须直接在网页html中包含svg xml，如：

2) If you don't have to actually create a jpeg/png image file (and don't need to support outdated browsers), you can manipulate the svg directly with jQuery. You can't access the svg paths when embedding the svg using img or object tags, so you'll have to directly include the svg xml in your webpage html like:

<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>

然后更改颜色就像这样简单：

then changing the colors is as easy as:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    $('#CA').css('fill', 'blue');
    $('#NY').css('fill', '#ff0000');
</script>

这篇关于使用PHP将SVG图像转换为PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！