Develop Reference

Tkinter/Pillow - How to make (0, 0) in the same place as in Pillow

So I was trying to figure out who my coordinates were messed up when adding text to an image using canvas coordinates , until I noticed that (0, 0) is off:
How would I put the origin of the canvas in the same place as Pillow does(or at least account for this when adding the text)?
class PictureWindow(tk.Toplevel):
def __init__(self, parent):
tk.Toplevel.__init__(self, parent)
self.parent = parent
self.x = self.y = 0
self.rect = None
self.tex = None
self.start_x = None
self.start_y = None
image = Image.open(file)
smaller_image = image.resize((round(image.size[0]/2), round(image.size[1]/2)))
img = ImageTk.PhotoImage(smaller_image)
self.canvas = tk.Canvas(self, width=img.width(), height=img.height())
self.canvas.img = img
self.canvas.create_image(0, 0, image=img, anchor=tk.NW)
self.canvas.pack(expand=True)
self.canvas.create_text((0, 0), text="(0, 0)", fill=self._from_rgb((225, 225, 225)))
self.canvas.bind("<ButtonPress-1>", self.on_button_press)
self.canvas.bind("<B1-Motion>", self.on_move_press)
self.canvas.bind("<ButtonRelease-1>", self.on_button_release)
self.finished = tk.Button(self, text="Add Watermark", command=self.Watermark)
self.finished.pack()
self.go_back = tk.Button(self, text="Go back to change settings", command=self.go_away)
self.go_back.pack()
def _from_rgb(self, rgb):
r, g, b = rgb
return f'#{r:02x}{g:02x}{b:02x}'
def go_away(self):
self.withdraw()
def on_button_press(self, event):
self.start_x = event.x
self.start_y = event.y
self.canvas.delete(self.tex)
self.tex = None
if not self.rect:
self.rect = self.canvas.create_rectangle(self.x, self.y, 1, 1, fill=self._from_rgb((249, 0, 0)), stipple='gray12')
def on_move_press(self, event):
self.curX, self.curY = (event.x, event.y)
self.text_x = ((self.start_x + self.curX) / 2)
self.text_y = ((self.start_y + self.curY) / 2)
self.canvas.coords(self.rect, self.start_x, self.start_y, self.curX, self.curY)
def on_button_release(self, event):
font_preview_size = int(font_size)
font_preview_almost = (font_preview_size)
font_preview = int(font_preview_almost)
if not self.tex:
self.tex = self.canvas.create_text((self.text_x, self.text_y), text=watermark_text, font=('Gotham Medium', font_preview), fill=self._from_rgb((color)))
def Watermark(self):
self.font_size_var = font_size
Font_Size = int(self.font_size_var)
A = alpha
R = int(color[0])
B = int(color[1])
G = int(color[2])
img = Image.open(file).convert("RGBA")
img_down = img.resize((int(img.width/2), int(img.height/2)), resample=Image.NEAREST)
img_down.x, img_down.y = img_down.size
txt = Image.new('RGBA', img_down.size, (225,225,225,0))
if custom_font == "yes":
font = ImageFont.truetype(font_file, Font_Size)
draw = ImageDraw.Draw(txt)
text = watermark_text
if custom_font == "no":
font = ImageFont.truetype('arial.ttf', Font_Size)
draw = ImageDraw.Draw(txt)
text = watermark_text
self.final_x = self.canvas.canvasx(self.text_x)
self.final_y = self.canvas.canvasx(self.text_x)
draw.text((self.final_x, self.final_y), text, font=font, fill=(R, G, B, A))
comp = Image.alpha_composite(img_down, txt)
img_up = comp.resize((int(comp.width*2), int(comp.height*2)), resample=Image.NEAREST)
img_up.save(save_file)
img_up.show()
p.s. if anyone knows why when the pillow text alpha is set to 0, the text is never added, please let me know!

I'll just post Bryan Oakley's comment as an answer. Pillow has an anchor option and all I needed to do was set it to mm

Manual Annotation with Tkinter

I am using Tkinter to import images with Openslide. I would like to integrate a manual annotation module into my program like this:
class ResizableCanvas(Canvas):
def __init__(self, parent, **kwargs):
Canvas.__init__(self, parent, **kwargs)
self.bind("<Configure>", self.on_resize)
self.height = self.winfo_reqheight()
self.width = self.winfo_reqwidth()
def on_resize(self, event):
wscale = float(event.width) / self.width
hscale = float(event.height) / self.height
self.width = event.width
self.height = event.height
self.config(width=self.width, height=self.height)
class ViewerTab:
def __init__(self, master, model, dim=800):
self.sideFrame = ttk.Frame(self.master, width=100)
self.coords = {"x":0,"y":0,"x2":0,"y2":0}
self.lines = []
def click(self):
self.coords["x"] = self.x
self.coords["y"] = self.y
self.lines.append(self.canvas.create_line(self.coords["x"],self.coords["y"],self.coords["x"],self.coords["y"]))
def drag(self):
# update the coordinates from the event
self.coords["x2"] = self.x
self.coords["y2"] = self.y
self.canvas.coords(self.lines[-1], self.coords["x"],self.coords["y"],self.coords["x2"],self.coords["y2"])
#self.canvas.bind("<Button-1>", self.dirbutton)
#self.canvas.bind("<B1-Motion>", self.move)
self.canvas.bind("<ButtonRelease-1>", self.nomove)
self.canvas.bind("<Button-2>", self.get_position)
self.canvas.bind("<ButtonPress-1>", self.click)
self.canvas.bind("<B1-Motion>", self.drag)

So if I got it right from the comments, the issue is to be able to both pan the slide and draw on it using binding to mouse clicks and motion. There are several way to do that, for instance:
Use radiobuttons so that the user selects the "mode": either pan or annotate. Here is a small example based on https://stackoverflow.com/a/50129744/6415268 for the drawing part. The click() and drag() functions do different actions depending on the selected mode (stored a the StringVar).
import tkinter as tk
coords = {"x": 0, "y": 0, "x2": 0, "y2": 0}
# keep a reference to all lines by keeping them in a list
lines = []
def click(event):
if mode.get() == "pan":
canvas.scan_mark(event.x, event.y)
else:
# define start point for line
coords["x"] = canvas.canvasx(event.x)
coords["y"] = canvas.canvasy(event.y)
# create a line on this point and store it in the list
lines.append(canvas.create_line(coords["x"], coords["y"], coords["x"], coords["y"]))
def drag(event):
if mode.get() == "pan":
canvas.scan_dragto(event.x, event.y, gain=1)
else:
# update the coordinates from the event
coords["x2"] = canvas.canvasx(event.x)
coords["y2"] = canvas.canvasy(event.y)
# Change the coordinates of the last created line to the new coordinates
canvas.coords(lines[-1], coords["x"], coords["y"], coords["x2"], coords["y2"])
root = tk.Tk()
mode = tk.StringVar(root, "pan")
toolbar = tk.Frame(root)
toolbar.pack(fill='x')
tk.Radiobutton(toolbar, text="Pan",
variable=mode, value="pan").pack(side='left')
tk.Radiobutton(toolbar, text="Annotate",
variable=mode, value="annotate").pack(side='left')
canvas = tk.Canvas(root, bg="white")
canvas.create_rectangle(0, 0, 50, 50, fill='red')
canvas.create_rectangle(400, 400, 450, 450, fill='blue')
canvas.pack(fill='both')
canvas.bind("<ButtonPress-1>", click)
canvas.bind("<B1-Motion>", drag)
root.mainloop()
Another possibility is to use different bindings for the two kinds of actions using event modifiers (e.g. pressing the Ctrl, Shift or Alt key). For instance, the panning can be bound to Ctrl + mouse events while the drawing happens on simple mouse clicks and motion.
import tkinter as tk
coords = {"x": 0, "y": 0, "x2": 0, "y2": 0}
# keep a reference to all lines by keeping them in a list
lines = []
def draw_click(event):
# define start point for line
coords["x"] = canvas.canvasx(event.x)
coords["y"] = canvas.canvasy(event.y)
# create a line on this point and store it in the list
lines.append(canvas.create_line(coords["x"], coords["y"], coords["x"], coords["y"]))
def draw_drag(event):
# update the coordinates from the event
coords["x2"] = canvas.canvasx(event.x)
coords["y2"] = canvas.canvasy(event.y)
# Change the coordinates of the last created line to the new coordinates
canvas.coords(lines[-1], coords["x"], coords["y"], coords["x2"], coords["y2"])
root = tk.Tk()
toolbar = tk.Frame(root)
toolbar.pack(fill='x')
canvas = tk.Canvas(root, bg="white")
canvas.create_rectangle(0, 0, 50, 50, fill='red')
canvas.create_rectangle(400, 400, 450, 450, fill='blue')
canvas.pack(fill='both')
canvas.bind("<ButtonPress-1>", draw_click)
canvas.bind("<B1-Motion>", draw_drag)
canvas.bind('<Control-ButtonPress-1>', lambda event: canvas.scan_mark(event.x, event.y))
canvas.bind("<Control-B1-Motion>", lambda event: canvas.scan_dragto(event.x, event.y, gain=1))
root.mainloop()

Is there a way to have a draggable ruler in tkinter?

Is it possible?
Just to place it anywhere onto the window and drag it anywhere I want it.
Here is an example of draggable item I am looking to achieve like from HTML (I know, it's got nothing to do with html): How TO - Create a Draggable HTML Element.
Here is an example of what I mean by a ruler. A ruler like this:
It's only for display purposes and not calculating anything..
I'll be using Grid manager in this case.
I'll be happy to see any examples!

Standard module tkinter and ttk doesn't have rulers and I don't know any external module for tkinter which has rulers.
Using Canvas I can create widget which draws lines with numbers.
But it is still primitive widget which doesn't resize, doesn't scroll lines and numbers, doesn't rescale, and doesn't show mouse position.
EDIT: Now rules show mouse position using red lines. But if there is no Canvas then they have to know offset - how far they are from left top corner of window.
import tkinter as tk
class VRuler(tk.Canvas):
'''Vertical Ruler'''
def __init__(self, master, width, height, offset=0):
super().__init__(master, width=width, height=height)
self.offset = offset
step = 10
# start at `step` to skip line for `0`
for y in range(step, height, step):
if y % 50 == 0:
# draw longer line with text
self.create_line(0, y, 13, y, width=2)
self.create_text(20, y, text=str(y), angle=90)
else:
self.create_line(2, y, 7, y)
self.position = self.create_line(0, 0, 50, 0, fill='red', width=2)
def set_mouse_position(self, y):
y -= self.offset
self.coords(self.position, 0, y, 50, y)
class HRuler(tk.Canvas):
'''Horizontal Ruler'''
def __init__(self, master, width, height, offset=0):
super().__init__(master, width=width, height=height)
self.offset = offset
step = 10
# start at `step` to skip line for `0`
for x in range(step, width, step):
if x % 50 == 0:
# draw longer line with text
self.create_line(x, 0, x, 13, width=2)
self.create_text(x, 20, text=str(x))
else:
self.create_line((x, 2), (x, 7))
self.position = self.create_line(0, 0, 0, 50, fill='red', width=2)
def set_mouse_position(self, x):
x -= self.offset
self.coords(self.position, x, 0, x, 50)
def motion(event):
x, y = event.x, event.y
hr.set_mouse_position(x)
vr.set_mouse_position(y)
def click(event):
print(event.x, event.y)
root = tk.Tk()
root['bg'] = 'black'
vr = VRuler(root, 25, 250)#, offset=25)
vr.place(x=0, y=28)
hr = HRuler(root, 250, 25)#, offset=25)
hr.place(x=28, y=0)
c = tk.Canvas(root, width=250, height=250)
c.place(x=28, y=28)
#root.bind('<Motion>', motion) # it needs offset=28 if there is no Canvas
#root.bind('<Button-1>', click)
c.bind('<Motion>', motion)
c.bind('<Button-1>', click)
root.mainloop()

Tkinter Canvas : Scale on moving object

I do not know if my question is a stupid one or a tricky one.
So, using Tkinter and Canvas, I succeed to implement a scrolling/zooming function that work perfectly, thanks to this post Move and zoom a tkinter canvas with mouse. I also add a binding to resize the canvas size when the window size change without trouble.
Using coords and after, I have no trouble to move object around.
The trouble came when I tried to combine everything.
Moving and scrolling : no trouble
Scrolling and Zooming : ok
Zooming, moving and scrolling : do not work
The code bellow reproduce the trouble (python 2.7, work on windows). For what I can see, the trouble come from the scaling, maybe caused by the change of coords of the objects, that induce the canvas resizing, and then disable the scaling? If it is the case, I need help to solve this issue. If it is not the case, I need help to found the issue...
By removing/disable the line self.master.after(50, self.Display), moving do no occur anymore.
import Tkinter as tk
import math
class Example:
def __init__ (self, master):
self.master = master
self.interval = 0
self.SizeX, self.SizeY = master.winfo_width(), master.winfo_height()
#Canvas Frame
self.SystemCanvasFrame = tk.Frame(master, bg='black')
self.SystemCanvasFrame.grid(row=0, column=0)
#Canvas
self.SystemCanvas = tk.Canvas(self.SystemCanvasFrame, width=int(self.SizeX*0.75)-20, height=self.SizeY-20, bg="black")
self.SystemCanvas.focus_set()
self.xsb = tk.Scrollbar(self.SystemCanvasFrame, orient="horizontal", command=self.SystemCanvas.xview)
self.ysb = tk.Scrollbar(self.SystemCanvasFrame, orient="vertical", command=self.SystemCanvas.yview)
self.SystemCanvas.configure(scrollregion=(-500,-500,500,500))
self.SystemCanvas.configure(yscrollcommand=self.ysb.set, xscrollcommand=self.xsb.set)
#add the canvas with scroll bar in grid format
self.xsb.grid(row=1, column=0, sticky="ew")
self.ysb.grid(row=0, column=1, sticky="ns")
self.SystemCanvas.grid(row=0, column=0, sticky="nsew")
# This is what enables using the mouse to slide the window:
self.SystemCanvas.bind("<ButtonPress-1>", self.move_start)
self.SystemCanvas.bind("<B1-Motion>", self.move_move)
#windows scroll
self.SystemCanvas.bind("<MouseWheel>",self.zoomer)
#resize the main window
self.master.bind('<Configure>', self.UpdateCanvasSize)
#Create Objects
self.Size = 5 #object Size
x0 = 0
y0 = 0
x1 = self.Size
y1 = self.Size
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='green', outline='green', width=3, tags='Green')
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='red', outline='red', width=3, tags='Red')
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='yellow', outline='yellow', width=1, tags='Yellow')
self.Display()
def Display(self):
self.interval += 0.5 #speed parameter
GreenPos = self.UpdatePosition(0.1*self.interval, (0,0), 50)
RedPos = self.UpdatePosition(0.02*self.interval+180, (0,0), 200)
YellowPos = self.UpdatePosition(0.3*self.interval, RedPos, 10)
self.MoveObject('Green', GreenPos)
self.MoveObject('Red', RedPos)
self.MoveObject('Yellow', YellowPos)
self.master.after(50, self.Display) #Disable to zoom
def MoveObject (self, Obj, pos): #only move object that are in the field of view
"""Move Obj to the given position (tuple - xy)"""
ID = self.SystemCanvas.find_withtag(Obj)
#Convert the Center of the object to the coo need for tk
x0 = pos[0] - self.Size/2.0 #radius of the circle
y0 = pos[1] - self.Size/2.0
x1 = pos[0] + self.Size/2.0
y1 = pos[1] + self.Size/2.0
self.SystemCanvas.coords(ID, x0,y0,x1,y1)
def UpdatePosition(self, angle, center, distance):
"""Calculate next object position around the Center at the Distance and speed determine by Angle (in Radian) - Center of the object"""
h = center[0]
k = center[1]
radius = distance
Rad = angle
x = h+radius*math.cos(Rad)
y = k+radius*math.sin(Rad)
return (x, y)
def UpdateCanvasSize(self, event):
"""Permit to resize the canvas to the window"""
self.SizeX, self.SizeY = self.master.winfo_width(), self.master.winfo_height()
self.SystemCanvas.config(width=int(self.SizeX*0.75)-20, height=self.SizeY-20)
def move_start(self, event):
"""Detect the beginning of the move"""
self.SystemCanvas.scan_mark(event.x, event.y)
self.SystemCanvas.focus_set() #security, set the focus on the Canvas
def move_move(self, event):
"""Detect the move of the mouse"""
self.SystemCanvas.scan_dragto(event.x, event.y, gain=1)
def zoomer(self,event):
"""Detect the zoom action by the mouse. Zoom on the mouse focus"""
true_x = self.SystemCanvas.canvasx(event.x)
true_y = self.SystemCanvas.canvasy(event.y)
if (event.delta > 0):
self.SystemCanvas.scale("all", true_x, true_y, 1.2, 1.2)
elif (event.delta < 0):
self.SystemCanvas.scale("all", true_x, true_y, 0.8, 0.8)
self.SystemCanvas.configure(scrollregion = self.SystemCanvas.bbox("all"))
if __name__ == '__main__':
root = tk.Tk()
root.geometry('1125x750')
app = Example(root)
root.mainloop()

I'm new to Tkinter so this might not be the most elegant solution but I hope it gives you an idea on how to solve the problem.
The zoomer method scales your coordinates but these coordinates are reset anytime you call MoveObject or UpdatePosition. I added code that keeps track of the scale factor, self.scale, and a method update_coord that scales a given coordinate based on the scale factor. Finally, I called update_coord in the MoveObject and UpdatePosition methods.
Here is the working code;
import Tkinter as tk
import math
class Example:
def __init__ (self, master):
self.scale = 1 #Added
self.master = master
self.interval = 0
self.SizeX, self.SizeY = master.winfo_width(), master.winfo_height()
#Canvas Frame
self.SystemCanvasFrame = tk.Frame(master, bg='black')
self.SystemCanvasFrame.grid(row=0, column=0)
#Canvas
self.SystemCanvas = tk.Canvas(self.SystemCanvasFrame, width=int(self.SizeX*0.75)-20, height=self.SizeY-20, bg="black")
self.SystemCanvas.focus_set()
self.xsb = tk.Scrollbar(self.SystemCanvasFrame, orient="horizontal", command=self.SystemCanvas.xview)
self.ysb = tk.Scrollbar(self.SystemCanvasFrame, orient="vertical", command=self.SystemCanvas.yview)
self.SystemCanvas.configure(scrollregion=(-500,-500,500,500))
self.SystemCanvas.configure(yscrollcommand=self.ysb.set, xscrollcommand=self.xsb.set)
#add the canvas with scroll bar in grid format
self.xsb.grid(row=1, column=0, sticky="ew")
self.ysb.grid(row=0, column=1, sticky="ns")
self.SystemCanvas.grid(row=0, column=0, sticky="nsew")
# This is what enables using the mouse to slide the window:
self.SystemCanvas.bind("<ButtonPress-1>", self.move_start)
self.SystemCanvas.bind("<B1-Motion>", self.move_move)
#windows scroll
self.SystemCanvas.bind("<MouseWheel>",self.zoomer)
#resize the main window
self.master.bind('<Configure>', self.UpdateCanvasSize)
#Create Objects
self.Size = 5 #object Size
x0 = 0
y0 = 0
x1 = self.Size
y1 = self.Size
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='green', outline='green', width=3, tags='Green')
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='red', outline='red', width=3, tags='Red')
self.SystemCanvas.create_oval(x0,y0,x1,y1, fill='yellow', outline='yellow', width=1, tags='Yellow')
self.Display()
#**Added Method
def update_coord(self, coord):
"""Calculate the scaled cordinate for a given cordinate based on the zoomer scale factor"""
new_coord = [coord_i * self.scale for coord_i in coord]
return new_coord
def Display(self):
self.interval += 0.5 #speed parameter
GreenPos = self.UpdatePosition(0.1*self.interval, (0,0), 50)
RedPos = self.UpdatePosition(0.02*self.interval+180, (0,0), 200)
YellowPos = self.UpdatePosition(0.3*self.interval, RedPos, 10)
self.MoveObject('Green', GreenPos)
self.MoveObject('Red', RedPos)
self.MoveObject('Yellow', YellowPos)
self.master.after(1, self.Display) #Disable to zoom
def MoveObject (self, Obj, pos): #only move object that are in the field of view
"""Move Obj to the given position (tuple - xy)"""
ID = self.SystemCanvas.find_withtag(Obj)
#Convert the Center of the object to the coo need for tk
x0 = pos[0] - self.Size/2.0 #radius of the circle
y0 = pos[1] - self.Size/2.0
x1 = pos[0] + self.Size/2.0
y1 = pos[1] + self.Size/2.0
c_0 = self.update_coord([x0, y0]) #Added
c_1 = self.update_coord([x1, y1]) #Added
self.SystemCanvas.coords(ID, c_0[0], c_0[1], c_1[0], c_1[1]) #Added/Edited
def UpdatePosition(self, angle, center, distance):
"""Calculate next object position around the Center at the Distance and speed determine by Angle (in Radian) - Center of the object"""
h = center[0]
k = center[1]
radius = distance
Rad = angle
x = h+radius*math.cos(Rad)
y = k+radius*math.sin(Rad)
return self.update_coord([x, y]) #Added/Edited
def UpdateCanvasSize(self, event):
"""Permit to resize the canvas to the window"""
self.SizeX, self.SizeY = self.master.winfo_width(), self.master.winfo_height()
self.SystemCanvas.config(width=int(self.SizeX*0.75)-20, height=self.SizeY-20)
def move_start(self, event):
"""Detect the beginning of the move"""
self.SystemCanvas.scan_mark(event.x, event.y)
self.SystemCanvas.focus_set() #security, set the focus on the Canvas
def move_move(self, event):
"""Detect the move of the mouse"""
self.SystemCanvas.scan_dragto(event.x, event.y, gain=1)
def zoomer(self,event):
"""Detect the zoom action by the mouse. Zoom on the mouse focus"""
true_x = self.SystemCanvas.canvasx(event.x)
true_y = self.SystemCanvas.canvasy(event.y)
if (event.delta > 0):
self.SystemCanvas.scale("all", true_x, true_y, 1.2, 1.2)
self.scale *= 1.2 #**Added
elif (event.delta < 0):
self.SystemCanvas.scale("all", true_x, true_y, 0.8, 0.8)
self.scale *= 0.8 #**Added
#self.SystemCanvas.configure(scrollregion = self.SystemCanvas.bbox("all")) #**Removed (This disables scrollbar after zoom)
if __name__ == '__main__':
root = tk.Tk()
root.geometry('1125x750')
app = Example(root)
root.mainloop()

Python Tkinter save canvas as image using PIL

I have this code which lets the user draw on the canvas and save it as a jpeg file.
As mentioned in this post, I tried to draw in parallel on the canvas and in memory using the PIL so that I can save it as a jpeg instead of postscript. It seemed to be working until I found out that some of the images I saved with PIL are not the same as what was drawn on the canvas.
I assume canvas.create_line and draw.line from the PIL image draw module function similarly and should give similar output.
Below is what went wrong:
For example, when I draw a "T" it seems alright (Left is my drawing, right is the saved image).
But when I draw an "A" , the output image seems a bit weird.
This is my current code:
import Tkinter as tk
import Image,ImageDraw
class ImageGenerator:
def __init__(self,parent,posx,posy,*kwargs):
self.parent = parent
self.posx = posx
self.posy = posy
self.sizex = 200
self.sizey = 200
self.b1 = "up"
self.xold = None
self.yold = None
self.coords= []
self.drawing_area=tk.Canvas(self.parent,width=self.sizex,height=self.sizey)
self.drawing_area.place(x=self.posx,y=self.posy)
self.drawing_area.bind("<Motion>", self.motion)
self.drawing_area.bind("<ButtonPress-1>", self.b1down)
self.drawing_area.bind("<ButtonRelease-1>", self.b1up)
self.button=tk.Button(self.parent,text="Done!",width=10,bg='white',command=self.save)
self.button.place(x=self.sizex/7,y=self.sizey+20)
self.button1=tk.Button(self.parent,text="Clear!",width=10,bg='white',command=self.clear)
self.button1.place(x=(self.sizex/7)+80,y=self.sizey+20)
self.image=Image.new("RGB",(200,200),(255,255,255))
self.draw=ImageDraw.Draw(self.image)
def save(self):
print self.coords
self.draw.line(self.coords,(0,128,0),width=3)
filename = "temp.jpg"
self.image.save(filename)
def clear(self):
self.drawing_area.delete("all")
self.coords=[]
def b1down(self,event):
self.b1 = "down"
def b1up(self,event):
self.b1 = "up"
self.xold = None
self.yold = None
def motion(self,event):
if self.b1 == "down":
if self.xold is not None and self.yold is not None:
event.widget.create_line(self.xold,self.yold,event.x,event.y,smooth='true',width=3,fill='blue')
self.coords.append((self.xold,self.yold))
self.xold = event.x
self.yold = event.y
if __name__ == "__main__":
root=tk.Tk()
root.wm_geometry("%dx%d+%d+%d" % (400, 400, 10, 10))
root.config(bg='white')
ImageGenerator(root,10,10)
root.mainloop()
Where did I go wrong and what should I do to save the exact same picture that is drawn on the canvas as a jpeg image?

I managed to solved my problem.In fact i was just being dumb. Even though canvas.create_line and draw.line have the similar function, i didn't use the same exact data to draw out both images. after making changes, this is my working code.
import Tkinter as tk
import Image,ImageDraw
class ImageGenerator:
def __init__(self,parent,posx,posy,*kwargs):
self.parent = parent
self.posx = posx
self.posy = posy
self.sizex = 200
self.sizey = 200
self.b1 = "up"
self.xold = None
self.yold = None
self.drawing_area=tk.Canvas(self.parent,width=self.sizex,height=self.sizey)
self.drawing_area.place(x=self.posx,y=self.posy)
self.drawing_area.bind("<Motion>", self.motion)
self.drawing_area.bind("<ButtonPress-1>", self.b1down)
self.drawing_area.bind("<ButtonRelease-1>", self.b1up)
self.button=tk.Button(self.parent,text="Done!",width=10,bg='white',command=self.save)
self.button.place(x=self.sizex/7,y=self.sizey+20)
self.button1=tk.Button(self.parent,text="Clear!",width=10,bg='white',command=self.clear)
self.button1.place(x=(self.sizex/7)+80,y=self.sizey+20)
self.image=Image.new("RGB",(200,200),(255,255,255))
self.draw=ImageDraw.Draw(self.image)
def save(self):
filename = "temp.jpg"
self.image.save(filename)
def clear(self):
self.drawing_area.delete("all")
self.image=Image.new("RGB",(200,200),(255,255,255))
self.draw=ImageDraw.Draw(self.image)
def b1down(self,event):
self.b1 = "down"
def b1up(self,event):
self.b1 = "up"
self.xold = None
self.yold = None
def motion(self,event):
if self.b1 == "down":
if self.xold is not None and self.yold is not None:
event.widget.create_line(self.xold,self.yold,event.x,event.y,smooth='true',width=3,fill='blue')
self.draw.line(((self.xold,self.yold),(event.x,event.y)),(0,128,0),width=3)
self.xold = event.x
self.yold = event.y
if __name__ == "__main__":
root=tk.Tk()
root.wm_geometry("%dx%d+%d+%d" % (400, 400, 10, 10))
root.config(bg='white')
ImageGenerator(root,10,10)
root.mainloop()

make a litte change about mouse event
"""
画板,鼠标移动速度太快可以造成不连续的点
tkinter 8.6.11
https://stackoverflow.com/questions/17915440/python-tkinter-save-canvas-as-image-using-pil
"""
import tkinter as tk
from PIL import Image, ImageDraw
class ImageGenerator:
def __init__(self, parent, posx, posy, *kwargs):
self.parent = parent
self.posx = posx
self.posy = posy
self.sizex = 280
self.sizey = 280
self.penColor = "white" # 画笔的颜色 (255, 255, 255)
self.backColor = "black" # 画布背景色 (0, 0, 0)
self.penWidth = 10 # 笔刷的宽度
self.drawing_area = tk.Canvas(
self.parent, width=self.sizex, height=self.sizey, bg=self.backColor
)
self.drawing_area.place(x=self.posx, y=self.posy)
self.drawing_area.bind("<B1-Motion>", self.motion)
self.button = tk.Button(
self.parent, text="Done", width=10, bg="white", command=self.save
)
self.button.place(x=self.sizex / 7, y=self.sizey + 20)
self.button1 = tk.Button(
self.parent, text="Clear", width=10, bg="white", command=self.clear
)
self.button1.place(x=(self.sizex / 7) + 80, y=self.sizey + 20)
self.image = Image.new("RGB", (self.sizex, self.sizey), (0, 0, 0))
self.draw = ImageDraw.Draw(self.image)
def save(self):
filename = "temp.jpg"
self.image.save(filename)
def clear(self):
"""将画板和image清空"""
self.drawing_area.delete("all")
self.image = Image.new("RGB", (self.sizex, self.sizey), (0, 0, 0))
self.draw = ImageDraw.Draw(self.image)
def motion(self, event):
"""在画板和image上同时绘制"""
self.drawing_area.create_oval(
event.x,
event.y,
event.x + self.penWidth,
event.y + self.penWidth,
fill=self.penColor,
outline=self.penColor,
) # 在画布上画
self.draw.ellipse(
(
(event.x, event.y),
(event.x + self.penWidth, event.y + self.penWidth),
),
fill=self.penColor,
outline=self.penColor,
width=self.penWidth,
) # 在生成的图上画,point、line都太细
if __name__ == "__main__":
root = tk.Tk()
root.wm_geometry("%dx%d+%d+%d" % (300, 350, 10, 10))
root.config(bg="white")
ImageGenerator(root, 10, 10)
root.mainloop()