python将svg的html转成png图片。

以你之姓@ 2023-01-17 06:30 288阅读 0赞

### 文章目录 ###

*   *  说明：
     *  实现：svg转png
     *   *  报错：no library called "cairo" was found
         *  蓝奏云备份：
         *  注意点：一定再安装之后重启下pycharm
     *  另外示例：

## 说明： ##

今天跑一个nodejs生成验证码的GitHub项目，然后返回验证码图片时svg的html。

![在这里插入图片描述][20210427140819344.png]  
浏览器打开是正常的。

目标：转成图片。

## 实现：svg转png ##

然后开始搜索Python如何搞，先看看有没有现成使用的模块或者项目。

然后搜到了：`CairoSVG`

好像可以直接转：

from cairosvg import svg2png
    
    svg_code = """ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <line x1="12" y1="8" x2="12" y2="12"/> <line x1="12" y1="16" x2="12" y2="16"/> </svg> """
    
    svg2png(bytestring=svg_code,write_to='output.png')

### 报错：no library called “cairo” was found ###

然后报错：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70]

参考一个文章：  
https://blog.csdn.net/bz\_xyz/article/details/104637487

解决步骤：

### 蓝奏云备份： ###

如果GitHub下载慢，直接拿走安装即可，什么也不用更改。一路下一步安装。  
[我的蓝奏云备份：][Link 1]

[去这个地址][Link 2]

然后下载`gtk2-runtime-2.24.33-2021-01-30-ts-win64.exe`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70 1]

### 注意点：一定再安装之后重启下pycharm ###

我安装之后一直跑步了，然后重启下pycharm就好了。

其实参考的那个解决问题的文章作者也说了，他重启的是另一个编辑器。

## 另外示例： ##

cairosvg.svg2png(
        url="demo.svg", write_to="result.png")
    
    cairosvg.svg2pdf(
        file_obj=open("demo.svg", "rb"), write_to="result.pdf")
    
    output = cairosvg.svg2ps(
        bytestring=open("demo.svg").read().encode('utf-8'))

成功的png 截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70 2]

[20210427140819344.png]: /images/20221021/217d1a074dca4c9f9a8b3ce4ff8a42d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70]: /images/20221021/646fe81d00db484b98dc5691cbf7f098.png
[Link 1]: https://wwa.lanzous.com/i9kdUojy9ri
[Link 2]: https://github.com/tschoonj/GTK-for-Windows-Runtime-Environment-Installer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/002b4135913947ec9b696fd83c6d2bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4MTM4OQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/15f02283563b4e7b9d005411ac87ede1.png