Figure conversion to image output causes annotation distortion

[matt.sd.watson]

In my dash application, I have a dcc.Graph component that renders an annotated image:

I would like to export this as a full-resolution tiff file. When I convert the undelying image into a numpy array for export using the following code:

def plotly_fig2array(fig, array):
    # convert Plotly fig to an array
    fig_bytes = fig.to_image(format="webp", width=array.shape[1], height=array.shape[0])
    buf = io.BytesIO(fig_bytes)
    img = Image.open(buf)
    return np.array(Image.fromarray(np.asarray(img)).convert('RGB')).astype(np.uint8)

The text annotations are barely visible in the output image along the bottom of the border:

It appears that are significant distortion of the annotations is happening during the conversion.

[AIMPED]

Hi @matt.sd.watson.

Concerning your function: Why don’t you just return np.array(img)?

Other than that I can’t reproduce this:

import plotly.graph_objects as go
import plotly.express as px
import io
from PIL import Image
import numpy as np

fig = go.Figure(
    data=go.Scatter(
        x=[1,2,3], 
        y=[1,2,3], 
        mode='markers+lines'
    ),
    layout=dict(height=400, width=500)
)

fig.add_shape(
    type="line",
    x0=2,
    y0=1,
    x1=2.5,
    y1=1,
    line_width=3,
    label=dict(text="Text above line")
)

fig.show()

Which looks identical to:

fig_bytes = fig.to_image(format="webp")
buf = io.BytesIO(fig_bytes)
img = Image.open(buf)
arr = np.array(img) #np.array(Image.fromarray(np.asarray(img)).convert('RGB')).astype(np.uint8)
img.show()