plotly / dash-canvas

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

Adding background image with set opacity / Having two overlapping background images #32

Open nikandrovs94 opened 4 years ago

nikandrovs94 commented 4 years ago

I'm trying to use Dash canvas to do some radiographic film analysis. I first create a Dash canvas with the film image as a background. I then typically draw a line with the line tool and extract the profile from the background image along that line.

I would like to overlap two similar images with, for example, half opacity for each, as one single background and when I draw the line and extract the profile, I would get two profiles. This is useful for comparing profiles from two films while ensuring positional matching (by overlapping them and adjusting the position of one relative to the other).

Could this be an implemented feature? Should I try combining the two images outside of the canvas and then using the combined data as background? This wouldn't allow me to move them relative to each other inside the canvas, unfortunately.

nikandrovs94 commented 4 years ago

UPDATE:

My idea was to do the opposite of extracting json_data from the canvas and instead populate it with my own generated json_data of two background image objects. I would convert the images to base64 in order to use them in json_data dictionary and then pass that dictionary into DashCanvas via json_data = json.dumps(my_json_dict).

I've tried a simple case of the above by extracting a populated canvas json_data via my_dict = json.loads(string) and then reversing the steps and populating an empty canvas with this dictionary.

This seems to store the objects correctly but they are not displaying. I know that because I wrote a simple callback to print out current json_data stored in the canvas and it prints the one I uploaded into it. However, if I modify the canvas in any way (drawing or clicking the save button) I seems to clear my json_data and refreshes canvas json_data with the data I just drew or nothing in the case of clicking the save button.

emmanuelle commented 4 years ago

Hi @nikandrovs94 thank you for opening this issue. Having two different images and being able to move them is an interesting use case, but at the moment the geometry of the canvas (the drawing area) adapts to the dimensions of the background image so it's hard to extend this paradigm to the case of several images. But in theory it would be possible to have a canvas larger than the image and add other images etc. We could also add a button to upload an image as in http://tbolis.github.io/showcase/react-sketch/ (DashCanvas is based on react-sketch) but then the way to handle image dimensions is not clear, one should probably use the same scaling factor as for the background image.

Finally @amitsh1 's PR #33 will be interesting for adding objects.

At the moment I would recommend to blend the two images outside of DashCanvas if possible, maybe with scikit-image.

So no immediate solution I'm afraid but food for thought, thank you very much for bringing this to our attention!