java potrace_使用PHP将SVG图像转换为PNG

你问这个很有趣，我最近刚刚为我的工作网站做了这个，我想我应该写一个教程......以下是如何用PHP / Imagick做的，它使用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和颜色值 . 如果您不想在服务器上存储文件，则可以将图像输出为base 64

<?php echo '';?>

(在你使用clear / destroy之前)但是因为PNG作为base64存在问题所以你可能不得不输出base64作为jpeg

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

完成：

Edit

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

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

#CA,#FL,HI{

fill:blue;

}

#Al, #NY, #NM{

fill:#cc6699;

}

/*etc..*/

然后你可以做一个单独的文本替换，在继续创建imagick jpeg / png之前将css规则注入svg . 如果颜色没有变化，请检查以确保路径标记中没有任何内联填充样式覆盖css .

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

然后改变颜色就像：

$('#CA').css('fill', 'blue');

$('#NY').css('fill', '#ff0000');