plotly / dash-canvas

An interactive image editing component for Dash
https://dash.plot.ly/canvas
Other
84 stars 26 forks source link

Unable to customize height for Empty canvas #37

Open ycaokris opened 4 years ago

ycaokris commented 4 years ago

Problem description

Without loading an image, height of empty canvas is always 200px and cannot be customized.

Package version:

dash                 1.8.0  
dash-canvas          0.1.0  
dash-core-components 1.7.0  
dash-html-components 1.0.2  
dash-renderer        1.2.3  
dash-table           4.6.0  
Screen Shot 2020-02-11 at 3 51 43 PM
import dash
import dash_html_components as html
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring

app = dash.Dash(__name__)

canvas_width = 600 
canvas_height = 300 

app.layout = html.Div([
    html.H6('Draw on image and press Save to show annotations geometry'),
    html.Div([
    DashCanvas(id='canvas',
               lineWidth=2,
               width=500,
               height=300,
               hide_buttons=["zoom", "pan", "line", "pencil", "rectangle", "undo", "select"],
               lineColor='black',
               goButtonTitle='Sign'
               ),
    ], className="five columns"),
    html.Div([
    html.Img(id='my-image', width=300),
    ], className="five columns"),
    ])

@app.callback(Output('my-image', 'src'),
              [Input('canvas', 'json_data')])
def update_data(string):
    if string:
        mask = parse_jsonstring(string, (canvas_height, canvas_width))
    else:
        raise PreventUpdate
    return array_to_data_url((255 * mask).astype(np.uint8))

if __name__ == '__main__':
    app.run_server(debug=True)