主页 / coding / 问题 / 79005707
Accepted
Wang
Asked: 2024-09-20 15:29:10 +0800 CST

如何在 plotly 中禁用插值？

  • 772

我有类似以下的事情：

    fig.add_layout_image(
        dict(
            source=prefix_webp + base64.b64encode(webp_data).decode("utf-8"),
            xref='x', yref='y',  # Reference subplot axes
            x=0, y= 1,  # Position in subplot grid
            sizex=1, sizey=1,
            xanchor='left', yanchor='top',
            sizing='contain',  # Ensure it fits within the given size
        ),
        row=row, col=col
    )

因为图像的像素数量很少。如果我将图形保存为 PDF，图像就会像素化，这正是我想要的，因为它实际上代表了一些数据，我想看到每个像素的精确边缘。

但是，如果我在浏览器中显示它或将其保存为 html。图像看起来就像插值过的，并且变得平滑。

我想知道如何在 plotly 中禁用它

尝试通过模板添加 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>
        /* Custom CSS to apply pixelated rendering to images */
        img {
            image-rendering: pixelated;
        }
    </style>
</head>
<body>

    <h1>Plotly Layout Image Example</h1>
    <!-- This is where the Plotly figure will be inserted -->
    {{ 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

1 个回答

  1. Best Answer

    终于成功了。我们需要将图片标签识别为svg image。

    <!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>
        /* Custom CSS to apply pixelated rendering to images */
        svg image {
            image-rendering: pixelated;
        }
    </style>
</head>
<body>

    <h1>Plotly Layout Image Example</h1>
    <!-- This is where the Plotly figure will be inserted -->
    {{ fig | safe }}

</body>
</html>

    这个模板终于起作用了

    • 0

相关问题