I am showing a picture in a figure in bokeh and am using the BoxSelectTool in order to draw a rectangle.
box_select = BoxSelectTool(callback=callback)
p2 = figure(x_range=(0,700), y_range=(0,500),plot_width=1100,plot_height=1100,tools=[box_select])
p2.image_url( url='url',
x=1, y=1, w=700, h=500, anchor="bottom_left",source=im_src)
rect_source = ColumnDataSource(data=dict(x=[], y=[], width=[], height=[]))
callback = CustomJS(args=dict(rect_source=rect_source), code="""
// get data source from Callback args
var data = rect_source.data;
/// get BoxSelectTool dimensions from cb_data parameter of Callback
var geometry = cb_data['geometry'];
/// calculate Rect attributes
var width = geometry['x1'] - geometry['x0'];
var height = geometry['y1'] - geometry['y0'];
var x = geometry['x0'] + width/2;
var y = geometry['y0'] + height/2;
/// update data source with new Rect attributes
data['x'].push(x);
data['y'].push(y);
data['width'].push(width);
data['height'].push(height);
rect_source.data = data;
rect_source.change.emit();
'''
Now i want to show that image region as cropped in a new smaller figure, after the rectangle is drawn, without clicking a button or anything:
d2 = figure(x_range=(0,200), y_range=(0,100),plot_width=200,plot_height=100)
d2.image( image='image',
x=1, y=1, dw=100, dh=100, source=img, palette="Viridis256")
img = ColumnDataSource( data=dict(image=[]))
So i need something like this in JS:
tmp_im = cv2.imread('static/0' + str(pos1.loc[ind, "picture"].values[0]) + '.jpg')
tmp_im = tmp_im[geometry['y0']:geometry['y1'],geometry['x0']:geometry['x1']]
tmp_im = cv2.cvtColor(tmp_im, cv2.COLOR_BGR2GRAY)
img.data = dict(image=[tmp_im])
How can I do that in JS + bokeh?
from Showing cropped image in bokeh
No comments:
Post a Comment