使用Pyiodide和JS显示图像
我正在尝试从URL获取图像，并使用Pyiodide和javaScript在浏览器中显示它，而下面是我的代码：
<!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
import io, base64
response = await pyfetch(url="https://cataas.com/cat", method="GET")
img = iio.imread(BytesIO(await response.bytes()), index=None)
plt.imshow(img)
buf = io.BytesIO()
plt.savefig(buf, format='png')
buf.seek(0)
img_str = 'data:image/png;base64,' + base64.b64encode(buf.read()).decode('UTF-8')
<!-- imgplot = plt.imshow(img)
imgplot -->
</py-script>
</body>
<div id="textfield">A matplotlib figure:</div>
<div id="pyplotdiv"><img id="pyplotfigure"/></div>
<script>
document.getElementById("pyplotfigure").src=pyodide.globals.img_str
</script>
</html>
在这里，我正在使用Pyscript在Pyiodide Backend上运行的Pyscript，以使用Matplotlib打开并绘制图像，然后我将图像转换为base64字符串以PNG格式使用，然后访问Python中的JS元素，并使用此base64替换JS元素的SRC。但是，由于某种原因，该图像未在HTML页面中显示。我尝试使用打印语句打印图像，以检查其是否加载良好。打印语句是打印像素值，显示图像的加载良好。
I am trying to fetch image from a URL and display it in the browser using pyiodide and javascript and below is my code:
<!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
import io, base64
response = await pyfetch(url="https://cataas.com/cat", method="GET")
img = iio.imread(BytesIO(await response.bytes()), index=None)
plt.imshow(img)
buf = io.BytesIO()
plt.savefig(buf, format='png')
buf.seek(0)
img_str = 'data:image/png;base64,' + base64.b64encode(buf.read()).decode('UTF-8')
<!-- imgplot = plt.imshow(img)
imgplot -->
</py-script>
</body>
<div id="textfield">A matplotlib figure:</div>
<div id="pyplotdiv"><img id="pyplotfigure"/></div>
<script>
document.getElementById("pyplotfigure").src=pyodide.globals.img_str
</script>
</html>
Here I am using pyscript which runs on pyiodide backend to open and plot image using matplotlib and then I am converting the image to base64 string in PNG format and then accessing the JS elements from python and replacing the src of JS element with this base64. However for some reason the image is not being displayed in HTML page. I tried printing the image using print statement to check whether it is loading well or not. The print statement was printing pixel values showing the image is loading well.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我通过将图像设置为Python代码本身中的HTML来解决问题。在Python部分中，可以观察到我正在访问图像元素并将SRC属性设置为图像字符串。
以下是示例代码：
I solved the problem by setting the image to HTML in the python code itself. In the python part, it can be observed that I am accessing the image element and setting the src attribute to the image string.
Below is the example code: