Python FastAPI:返回的 gif 图像不是动画
Python FastAPI: Returned gif image is not animating
下面是我的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">
但更糟的是,图像甚至没有显示。
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')
(代表问题作者发布解决方案,以便post它在答案space).
我通过以下方式解决了这个问题:
- 使用@VadSim提供的代码,
- 将
wb
更改为 rb
注意:如果您 运行 程序然后将 wb
更改为 rb
,代码将破坏原始 gif 图像成为 0 字节图像。这就是它一开始不起作用的原因。
现在,我在 html 中使用了 gif :)
下面是我的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">
但更糟的是,图像甚至没有显示。
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')
(代表问题作者发布解决方案,以便post它在答案space).
我通过以下方式解决了这个问题:
- 使用@VadSim提供的代码,
- 将
wb
更改为rb
注意:如果您 运行 程序然后将 wb
更改为 rb
,代码将破坏原始 gif 图像成为 0 字节图像。这就是它一开始不起作用的原因。
现在,我在 html 中使用了 gif :)