使用Python的Pillow模块生成字节并显示图像

Question

我使用pillow模块用Python读取了一张jpg图片：

from PIL import Image

img = Image.open('./test.jpg')
bytes = img.tobytes()

如果我打印bytes，会得到类似这样的东西：

print(f'{bytes}')
# b'\xbe\xb0i\xb1\xa4^\xb1\xaad\xab\xa7`\xc2\xc0v\x96\x91Oj_2\xb7...

我将这个“bytes string”发送给我的js来显示：

var b64imgData = btoa(bytes); // bytes is the 'bytes string' show upper
var img = new Image();
img.src = "data:image/jpg;base64," + b64imgData;

$('#imgCtn').append(img);

很遗憾，最终的图像源似乎无效，因为我得到了无效图像图标，而不是我的图像test.jpg。 有人知道问题出在哪里吗？

---

编辑1：

正如@cubrr所提到的，不要使用img.tobytes()方法处理jpg文件。因此，请使用以下Python代码：

from PIL import Image

img = Image.open('./test.jpg')
imageBytes = io.BytesIO()
img.save(imageBytes, format='JPEG')
bytes = imageBytes.getvalue()

- johannchopin

---

我投票关闭此问题，因为从OP所做的评论中，似乎存在许多不同的问题。 - AMC

@AMC 我理解你的意思，但我认为不只有我一个人会搜索实现这种功能的方法，在SO上也没有很多相关问题。 - johannchopin

在这种情况下，最好编辑您的帖子以准确反映您想要做的事情。 - AMC

Answer 1

来自Pillow文档：

Image.tobytes(encoder_name='raw', *args)

...

警告：此方法返回内部存储的原始图像数据。对于压缩的图像数据（例如PNG，JPEG），请使用save()，并使用BytesIO参数进行内存数据处理。

因此，请尝试使用save获取JPG字节，而不是原始的内部图像数据：

img = Image.open('./test.jpg')
imageBytes = io.BytesIO()
img.save(imageBytes, format='JPEG')
bytes = imageBytes.getvalue()

如果仍然不起作用，请详细说明您所说的“将此字节字符串发送到我的js”的含义。您是如何发送和接收它的（请提供代码）？

- cbr

---

好的，谢谢。但是我在哪里需要指定我的图像名称？我使用一个Websockets服务将其发送到我的js。 - johannchopin

我不确定你的意思。如果您像发送自己示例中的“bytes”一样发送“bytes”，它是否无法正常工作？ - cbr

我更新了我的示例，包括你的 Image.open，如果有帮助的话。 - cbr

好的，它也没有显示图片。当我查看我的DOM时，我发现该图像具有像这样的src属性：src="data:image/jpg;base64,YidceGZmXHhkOFx4ZmZ..."。 - johannchopin

其中包含\xff\xd8\xff，这是JPG头的开始，因此看起来没问题。你的图片有多大？数据URL确实有浏览器特定的大小限制。如果你不需要通过websocket传输该图像，可以在服务器上添加一个端点来生成所需的任何图像，并将该端点的URL设置为src。 - cbr

这是一个非常小的图片，像素大小只有 30x20 像素，因此我认为这不是问题的原因。此外，format='JPG' 似乎无效（我收到了一个错误），在调研后发现 JPG 不是正确的格式，而 JPEG 才是。 - johannchopin