在 folium 弹出窗口中使用 Jpeg 图像答案

【问题标题】：Using Jpeg image in folium popup在 folium 弹出窗口中使用 Jpeg 图像
【发布时间】：2018-09-06 04:40:10
【问题描述】：

我想在 folium 地图的标记中显示 jpg 图像作为弹出窗口。我找到了一些示例代码，但是当我使用同一目录中的图像运行它时，弹出窗口只是空白。地图和标记似乎创建得很好，但弹出窗口只是空白。

我确定我遗漏了一些明显的东西，有人可以指出吗？

import folium
import branca
import os

import json
import numpy as np
#import vincent
from folium import IFrame
import pandas as pd
import numpy.ma as ma
import base64
import matplotlib.pyplot as plt

def make_data():
    x = np.linspace(-np.pi, np.pi, 101)
    sin = np.sin(x)
    cos = np.cos(x)
    cos[20:50] = np.NaN
    return pd.DataFrame(np.asanyarray([sin, cos]).T, columns=  ['sin', 'cos'],   index=x)

df = make_data()
resolution, width, height = 75, 7, 3


station = '42'
lon, lat = -42, -21
mapa = folium.Map(location=[lat, lon], zoom_start=5)

encoded = base64.b64encode(open('P8290065.JPG', 'rb').read()).decode()

html = '<img src="data:image/JPG;base64,{}">'.format
iframe = IFrame(html(encoded), width=632+20, height=420+20)
popup = folium.Popup(iframe, max_width=2650)

icon = folium.Icon(color="blue", icon="ok")
marker = folium.Marker(location=[lat-2, lon+1], popup=popup, icon=icon)
mapa.add_child(marker);


mapa.save("MapImage.html")

【问题讨论】：

无论图像的类型或大小如何，我都无法使用完全相同的代码复制此内容。你确定图像是有效的吗？也许它只是alpha上的白色，所以你看不到它？ html中的iframe是什么样子的？
您的意思是当您使用该代码时，您会看到图像？
我是 Python 新手，也许这不对，但我试过了： iframe.save("iframe.html") 和 iframe.html 只是空白。你是这个意思吗？当我在 windows Photo 应用程序中打开图片时，它不仅仅是白色的。它也存在于我运行代码的目录中。
我需要更仔细地表述这一点：如果您打开 MapImage.html 并搜索弹出窗口，它是什么样的？
弹出窗口只是一个空白区域。正在创建弹出窗口，但它不显示图像。该图标是在我想要的位置创建的。我点击图标。弹出窗口出现。弹出窗口只是一个空白区域，不是jpg图像的样子。

标签： python jpeg folium

【解决方案1】：

遇到了同样的问题。应该是图片大小的问题。尝试：

from PIL import Image
image = Image.open(imagename)
image = image.resize((width, height), Image.ANTIALIAS)
image.save(resize_path + imagename, 'jpg', quality=100)

...

encoded = base64.b64encode(open('P8290065.JPG', 'rb').read())
html = '<img src="data:image/JPG;base64,{}">'.format
iframe = IFrame(html(encoded.decode("UTF-8")), width=632+20, height=420+20)
popup = folium.Popup(iframe, max_width=2650)

这对我有用。请注意，我从第一行中删除了编码并添加了

html(encoded.decode("UTF-8"))

到 html 行。

【讨论】：