使用PHP将SVG图像转换为PNG

我正在开发一个web项目,涉及动态生成的美国地图基于一组数据着色不同的状态。

这个SVG文件给了我一个很好的美国空白地图,是很容易改变每个国家的颜色。困难的是,IE浏览器不支持SVG,为了使我使用svg提供的方便的语法,我需要将其转换为JPG。

理想情况下,我想只做GD2库,但也可以使用ImageMagick。我绝对没有线索如何做到这一点。

将考虑任何允许我动态地改变美国地图上的状态的颜色的解决方案。关键是,它很容易改变的颜色在飞行,它是跨浏览器。 PHP / Apache解决方案。

这很有趣,你问这个,我刚刚做了我的工作的网站,我想我应该写一个教程…这里是如何做到与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以及如何id&颜色值被存储。如果不想在服务器上存储文件,可以像基本64一样输出图像

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

(在你使用清除/销毁),但是有PNG的问题,base64所以你可能要输出base64作为jpeg

你可以看到一个例子,我在前雇主的销售区域地图:

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

完:

编辑

自从写上述内容后,我想出了两种改进的技术:

1)而不是一个regex循环来改变填充状态,使用CSS来创建样式规则

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

然后你可以做一个单一的文本替换注入你的CSS规则到svg中,然后继续imagick jpeg / png创建。如果颜色不变,请检查以确保您的路径标记中没有任何内联填充样式覆盖CSS。

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

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

然后改变颜色是一样容易:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    $('#CA').css('fill', 'blue');
    $('#NY').css('fill', '#ff0000');
</script>
http://stackoverflow.com/questions/4809194/convert-svg-image-to-png-with-php

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:使用PHP将SVG图像转换为PNG