php svg转png api,使用PHP将SVG图像转换为PNG

这很有趣,你问这个,我刚刚做了我的工作的网站,我想我应该写一个教程…这里是如何做到与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 '';?>

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

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

完:

编辑

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

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

#CA,#FL,HI{

fill:blue;

}

#Al, #NY, #NM{

fill:#cc6699;

}

/*etc..*/

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

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用node-canvassvg转换png。 安装: ``` npm install canvas ``` 示例代码: ``` const { createCanvas, loadImage } = require('canvas') const fs = require('fs') async function svg2png(svg, png) { const image = await loadImage(svg) const canvas = createCanvas(image.width, image.height) const ctx = canvas.getContext('2d') ctx.drawImage(image, 0, 0) const buffer = canvas.toBuffer() fs.writeFileSync(png, buffer) } svg2png('input.svg', 'output.png') ``` 此代码将“input.svg”文件转换为“output.png”文件。 ### 回答2: SVG是一种可伸缩矢量图形格式,而PNG是一种位图图像格式。如果我们想把SVG文件转换PNG,我们可以使用Node.js来完成。 首先,我们需要安装一些必要的Node.js。我们可以使用`npm`命令来安装`svg2png`,这个可以帮助我们将SVG转换PNG。打开终端窗口,并输入以下命令来安装`svg2png`: ``` npm install svg2png ``` 安装完成后,我们可以创建一个Node.js脚本来执行转换操作。在脚本中,我们首先需要引入`svg2png`和`fs`,`fs`用于读取和写入文件。然后,我们可以使用`svg2png`的`convert`方法来执行转换。下面是一个示例代码: ```javascript const fs = require('fs'); const svg2png = require('svg2png'); const svgFilePath = 'path_to_svg_file.svg'; const pngFilePath = 'path_to_output_png_file.png'; fs.readFile(svgFilePath, (err, data) => { if (err) throw err; svg2png(data) .then(buffer => { fs.writeFile(pngFilePath, buffer, (err) => { if (err) throw err; console.log('SVG转换PNG成功!'); }); }) .catch(error => { console.error('转换失败:', error); }); }); ``` 在上面的代码中,我们首先读取SVG文件,然后使用`svg2png`的`convert`方法将SVG转换PNG。最后,我们将转换后的PNG图像数据写入到指定的输出文件中。完成后,我们会在控制台输出成功或失败的相关信息。 要使用上述代码进行转换,我们需要将`path_to_svg_file.svg`替换为SVG文件的实际路径,将`path_to_output_png_file.png`替换为要生成的PNG文件的实际路径。执行脚本后,我们将得到一个转换成功的PNG图像文件。 需要注意的是,由于`svg2png`依赖于Cairo,因此在使用此方法之前,我们需要确保已经在计算机上安装了Cairo。 ### 回答3: 使用Node将SVG转换PNG可以通过使用一些来实现。 首先,你需要安装`svg2png`。你可以使用npm命令安装它:`npm install svg2png`。 安装完后,你需要在项目中引入它:`const svg2png = require('svg2png');`。 接下来,你可以使用以下代码将SVG文件转换PNG: ```javascript const fs = require('fs'); fs.readFile('input.svg', (err, data) => { if (err) throw err; // 将SVG数据转换PNG文件 svg2png(data) .then(buffer => { fs.writeFile('output.png', buffer, err => { if (err) throw err; console.log('PNG文件已生成'); }); }) .catch(error => { console.error('转换失败:', error); }); }); ``` 上述代码中,我们首先使用`fs`模块来读取SVG文件的数据。然后,我们使用`svg2png`函数将SVG数据转换PNG格式的数据。最后,我们使用`fs.writeFile`方法将PNG数据写入文件。 请确保在运行上述代码前,你已经准备好了一份名为`input.svg`的SVG文件。一旦代码执行完成,你将会在项目中看到一个名为`output.png`的PNG文件。 这就是使用Node将SVG转换PNG的简单方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值