Python Tkinter save canvas as image using PIL

Question

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?

Answer 1

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()

Answer 2

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()