如何在Plotly中禁用图像插值效果？

使用Plotly的add_layout_image方法添加低像素量的布局图像时，保存为PDF能正常呈现像素化效果（清晰显示每个像素边缘），但在浏览器中查看或保存为HTML时，图像会被插值处理变得平滑。尝试通过自定义HTML模板添加CSS的方式未生效，相关代码如下：

添加布局图像的代码：

fig.add_layout_image(
    dict(
        source=prefix_webp + base64.b64encode(webp_data).decode("utf-8"),
        xref='x', yref='y',  # 关联子图坐标轴
        x=0, y=1,  # 子图网格中的位置
        sizex=1, sizey=1,
        xanchor='left', yanchor='top',
        sizing='contain',  # 确保图像适配指定尺寸
    ),
    row=row, col=col
)

未生效的CSS模板代码：

html_template = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly Layout Image Example</title>
    <style>
        /* 尝试为图像应用像素化渲染的自定义CSS */
        img {
            image-rendering: pixelated;
        }
    </style>
</head>
<body>

    <h1>Plotly Layout Image Example</h1>
    <!-- Plotly图像将插入到此处 -->
    {{ fig | safe }}

</body>
</html>
'''

plotly_html = fig.to_html(full_html=False)

from jinja2 import Template
template = Template(html_template)
html_output = template.render(fig=plotly_html)
with open(os.path.expanduser('test-css.html'), 'w') as file:
    file.write(html_output)

需解决的问题：如何在Plotly生成的HTML中禁用图像插值，保持像素化显示效果。

方法1：修正CSS选择器（针对SVG内的image元素） #

原CSS失效的核心原因是：Plotly的布局图像并非使用HTML的<img>标签，而是嵌入在SVG中的<image>元素。因此需要修改CSS选择器，精准定位目标元素：

修改后的HTML模板：

html_template = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly Layout Image Example</title>
    <style>
        /* 为SVG内的图像应用像素化渲染，兼容多浏览器 */
        svg image {
            image-rendering: -moz-crisp-edges;   /* Firefox */
            image-rendering: -o-crisp-edges;     /* Opera */
            image-rendering: pixelated;          /* Chrome/Edge/Safari */
            image-rendering: crisp-edges;        /* 通用标准 */
        }
    </style>
</head>
<body>
    <h1>Plotly Layout Image Example</h1>
    {{ fig | safe }}
</body>
</html>
'''

此方法通过选择SVG内的<image>元素，直接将像素化渲染样式应用到目标图像，覆盖浏览器默认的平滑插值行为。

方法2：用BeautifulSoup直接修改HTML元素样式 #

如果模板CSS存在兼容性问题，可以通过BeautifulSoup直接修改Plotly生成的HTML代码，为目标图像添加行内样式：

from bs4 import BeautifulSoup
from jinja2 import Template

# 生成Plotly的HTML片段
plotly_html = fig.to_html(full_html=False)

# 解析HTML并修改图像样式
soup = BeautifulSoup(plotly_html, 'html.parser')
for svg_image in soup.select('svg image'):
    # 添加像素化渲染的行内样式
    svg_image['style'] = 'image-rendering: pixelated; image-rendering: crisp-edges;'

# 插入到模板中并保存
html_template = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly Layout Image Example</title>
</head>
<body>
    <h1>Plotly Layout Image Example</h1>
    {{ fig | safe }}
</body>
</html>
'''
template = Template(html_template)
html_output = template.render(fig=str(soup))

with open(os.path.expanduser('test-css.html'), 'w') as file:
    file.write(html_output)

这种方式直接修改目标元素的样式属性，避免了CSS选择器可能存在的优先级或兼容性问题。

内容的提问来源于stack exchange，提问作者Wang