My app should allow user to upload an image from browser, followed by some operations using opencv, and then it needs to display modified image back. My problem is in update_output function. When I pass i, I see the image in the browser, however if I pass dataURI (modified version of image using opencv), then image is never displayed in a browser. Could someone help me please?
#app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Upload(
id='upload-image',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
),
html.Div(id='output-image-upload'),
dcc.Store(id='store-data', storage_type='memory')
])
@app.callback(Output('store-data', 'data'), Input('upload-image', 'contents') )
def store_data(value): return value
def data_uri_to_cv2_img(uri):
encoded_data = uri.split(',')[1]
nparr = np.fromstring(base64.b64decode(encoded_data), np.uint8)
img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
return img
def parse_contents(contents):
return html.Div([
html.Img(src=contents, style={'height':'10%', 'width':'10%'})
])
@app.callback(
Output('output-image-upload', 'children'),
Input('store-data', 'data')
)
def update_output(images):
if not images:
return
children = []
for i in images:
img1 = data_uri_to_cv2_img(i)
#some operations -- skip for now
_, buffer = cv2.imencode('.jpg', img1)
jpg_as_text = base64.b64encode(buffer.tobytes())
dataURI = 'data:image/jpeg;base64,' + str(jpg_as_text)
children.append(parse_contents(dataURI))
return children
if __name__ == '__main__':
app.run_server(host='localhost',port=8005, debug = True)