这是我关于SO的第一个问题。如果问题不清楚，请给我指路。
我正试图从公共API获取图像，并使用PyScript将其写在网页上。
但是，我无法在网页上显示图像。我尝试了不同的软件包来读取图像(PIL, matplotlib, imageio)和不同的方法来显示输出(设置"output"在pyscript的开头，使用pyscript.write())。下面你可以找到一个完整的(不工作的)示例。
img被格式化为包含uint8值的Numpy数组。
:从API中正确获取数据。如果我把数据当作Numpy数组，我可以看到所有的像素值。但是，之后我无法在网页上显示图像。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
- imageio
</py-env>
</head>
<body>
<h1>PyScript - images from API</h1>
<div>
<p>
This webpage fetches a cat image from <a href="https://cataas.com/#/", target="_blank">cataas</a> and displays it below.
</p>
</div>
<div id="image"></div>
<py-script output="image">
from pyodide.http import pyfetch
import asyncio
from io import BytesIO
import matplotlib.pyplot as plt
import imageio.v3 as iio
response = await pyfetch(url="https://cataas.com/cat", method="GET")
img = iio.imread(BytesIO(await response.bytes()), index=None)
imgplot = plt.imshow(img)
imgplot
</py-script>
</body>
</html>
我在Chrome和Firefox上都测试过，但是这个图像从来没有显示过。
提前感谢!
您需要将输出图像分配给HTML文档中的某个元素。在pyscript节点中添加如下内容:
document.querySelector("img").setAttribute("src", img)
将在标签中显示图像:<img id ="img" src="src">使用id ="img". css的
和，我不知道你的代码下载图像的工作原理，但我谷歌了很多(不记得源代码，最有可能的是这个:https://www.jhanley.com/pyscript-loading-python-code-in-the-browser/)，并创建了两个函数:
async def download(url):
filename = Path(url).name
response = await pyfetch(url)
if response.status == 200:
status = response.status
with open(filename, mode="wb") as file:
file.write(await response.bytes())
return filename, status
else:
status = response.status
filename = None
return filename, status
async def process_response(url):
response_content = await loop.run_until_complete(
download(url)
)
if response_content[1] == 200:
data = base64.b64encode(open(response_content[0], "rb").read()).decode("utf-8")
src = f"data:image/png;base64,{data}"
return src
else:
src = None
return src
img = await process_response("url")
document.querySelector("img").setAttribute("src", img)
我添加了这个答案，作为@Johnny R.接受的答案的补充，因为我花了一些时间来弄清楚如何导入他在函数中使用的Path元素。完整的工作代码如下:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
- imageio
</py-env>
</head>
<body>
<h1>PyScript - images from API</h1>
<div>
<p>
This webpage fetches a cat image from <a href="https://cataas.com/#/", target="_blank">cataas</a> and displays it below.
</p>
</div>
<div><img id ="img" src="src"></div>
<py-script>
from pyodide.http import pyfetch
import asyncio
from js import document
import base64
from pathlib import Path
async def download(url):
filename = Path(url).name
response = await pyfetch(url, method="GET")
if response.status == 200:
status = response.status
with open(filename, mode="wb") as file:
file.write(await response.bytes())
return filename, status
else:
status = response.status
filename = None
return filename, status
async def process_response(url):
response_content = await loop.run_until_complete(
download(url)
)
if response_content[1] == 200:
data = base64.b64encode(open(response_content[0], "rb").read()).decode("utf-8")
src = f"data:image/png;base64,{data}"
return src
else:
src = None
return src
img = await process_response("https://cataas.com/cat")
document.querySelector("img").setAttribute("src", img)
</py-script>
</body>
</html>