【问题标题】:Python FastAPI: Returned gif image is not animatingPython FastAPI:返回的 gif 图像没有动画
【发布时间】:2021-08-06 19:42:21
【问题描述】:

下面是我的 Python 和 Html 代码:-

Python:

@app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
     error_img = Image.open('templates/crying.gif')
     byte_io = BytesIO()
     error_img.save(byte_io, 'png')
     byte_io.seek(0)
     return StreamingResponse(byte_io, media_type='image/gif')

HTML:

<img src="" id="img-maze" alt="this is photo" style="display: none;" />

function goBuster(file) {

    fetch('/', {
        method: 'GET',
        body: data
    })
        .then(response => response.blob())
        .then(image => {
            var outside = URL.createObjectURL(image);
            var mazeimg = document.getElementById("img-maze");
            mazeimg.onload = () => {
                URL.revokeObjectURL(mazeimg.src);
            }
            mazeimg.setAttribute('src', outside);
            mazeimg.setAttribute('style', 'display:inline-block');

        })
}

图片没有动画,我查看了生成的html,发现:

<img src="blob:http://127.0.0.1:8000/ee2bda53-92ac-466f-afa5-e6e34fa3d341" id="img-maze" alt="this is  photo" style="display:inline-block">

所以 img src 使用的是 blob,我想这就是 gif 没有动画的原因,但我不知道如何修复它。

更新 1

现在我已将代码更新为:

      with open('templates/crying.gif', 'rb') as f:
        img_raw = f.read()
        byte_io = BytesIO()
        byte_io.write(img_raw)
        byte_io.seek(0)
        return StreamingResponse(byte_io, media_type='image/gif')

生成的 HTML 看起来一样:

<img src="blob:http://127.0.0.1:8000/c3ad0683-3971-4444-bf20-2c9cd5eedc3d" id="img-maze" alt="this is maze photo" style="display:inline-block">

但更糟的是,图像甚至没有显示出来。

【问题讨论】:

    标签: javascript python html fastapi


    【解决方案1】:
    error_img.save(byte_io, 'png')
    

    您正在将此图像转换为 png。 PNG 不支持动画。
    我认为您可以使用:

    @app.get('/', status_code=200)
    async def upload_file(file: UploadFile = File(...)):
         with open('templates/crying.gif', 'rb') as f:
             img_raw = f.read()
         byte_io = BytesIO(img_raw)
         return StreamingResponse(byte_io, media_type='image/gif')
    

    【讨论】:

    • 嗨,瓦德,感谢您的回答。它抛出一个错误:`img_raw = f.read() io.UnsupportedOperation: read`
    • 我找到原因了,把wb改成rb解决了UnsupportedOperation read`。但是,问题仍然存在并且变得更糟,图像现在不再显示。
    • 嗨@vadsim,我会将您的帖子设置为答案,您能否将wb 更新为rb?谢谢:)
    【解决方案2】:

    (代表问题作者发布解决方案,以便将其发布在答案空间中)

    我通过以下方式解决了问题:

    1. 使用@VadSim 提供的代码,
    2. wb 更改为rb

    注意:如果您运行程序,然后将wb 更改为rb,代码会将原始 gif 图像破坏为 0 字节图像。这就是它一开始不起作用的原因。

    现在,我的 gif 在 html 中工作:)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-04-27
      • 1970-01-01
      • 1970-01-01
      • 2012-02-04
      • 1970-01-01
      • 1970-01-01
      • 2019-08-11
      相关资源
      最近更新 更多