Question

我有一个包含base64编码图像的列表：

当我尝试显示HTML页面中列表中的图像时，它仅连续显示第一张图像。当我打印列表中的每个元素时，我看到第一个编码名称被第二个编码名称填充。

例如：

如果第一个编码图像的名称是“ first”，那么第二个编码的名称是“ firstsecond”，第三个编码将是“ firstsecondthird”，就像它一直重复到列表中的最后一个图像一样。

我的编码是：

img = Image.open(os.path.join(upload,filename))       
    cropped = img.crop( ( left, top, right, bottom ) )        
    cropped.save(buffer, "PNG")
    img_str = base64.b64encode(buffer.getvalue())
    crop_pic.append(img_str)

我的html代码是：

<table>
                {% for i in crop_pic: %}                                            
                <tr>
                    <td>
                    <img src="data:image/png;base64,{{ i }}">                                                              
                    </td>
                </tr>
                {% endfor %}
 </table>

crop_pic是包含图像的列表

Answer 1

问题是循环继续进行时，第一张图片的名称用第二张图片填充，为避免这种情况，我在将每张图片追加到列表后删除了变量img_str和缓冲区。因此，代码将如下所示：

for top, right, bottom, left in boxes: 
    buffer = StringIO.StringIO()
    img = Image.open("path/to/file")       
    cropped = img.crop( ( left, top, right, bottom ) )                
    cropped.save(buffer, "PNG")
    img_str = base64.b64encode(buffer.getvalue())
    crop_pic.append(img_str) 
    del img_str, buffer

因此，运行此代码后，我在html页面中显示时没有看到相同的图像。

在HTML页面中显示base64编码的图像时出错

1 个答案: