微信公众号封面一键生成器-续

上一篇文章介绍了我对小工具的需求，实现过程中用到的 python 库的信息以及 demo 的展示，这篇文章主要就是对其中一些实现细节的总结

代码细节

这个工程是在 python 3.6 下实现的小工具，主要使用到 tkinter 中的若干控件，以及 PIL 的图片生成和图片放缩，以及截图的功能

源码地址：https://github.com/catcheroftime/CreateWxCover

界面布局

代码很简单，一步一步按照预设的布局添加控件即可

def __createMainwinow(self):self.root = tk.Tk()self.root.iconphoto(True, ImageTk.PhotoImage(data=base64.b64decode(logo_ico)))self.root.title("一键生成微信公众号封面")self.root.geometry('960x520')self.root.resizable(0,0)self.control_frame = ttk.Frame(self.root)self.control_frame.pack(anchor='w', padx=10, pady=5)self.__createElementframe()self.__createMoveFrame()# 创建一个Canvas，设置其背景色为白色self.canvas = tk.Canvas(self.root, height=self.cv_height, width=self.cv_width,highlightthickness=0, bg = 'white')self.canvas.pack()self.__createRuler()

选择本地图片功能

点击 打开图片 按键，弹出选择文件选择对话框，而这一部分 tkinter 有现成的 filedialog

from tkinter import filedialogdef __openLocalImage(self):ftypes = [('png files', '*.png'), ('jpg files', '*.jpg') ]file_path = filedialog.askopenfilename(title="选择背景图片", filetypes=ftypes )if file_path:self.picpath.set(file_path)self.__clearImageInfo()self.originimage = Image.open(file_path)self.__canvasShowImage()

ftypes 是一个简单的文件筛选的过滤器
当用户选择图片之后，将地址显示在 图片地址 之后的文本框中
删除旧的图片
将原始图片的信息保存到 self.originimage, 因为之后可能需要对图片放大缩小，保存一份原始图片信息
最后按照我们之前定义的规则绘制图片即可

简单看一下绘制图片 __canvasShowImage() 的函数

def __canvasShowImage(self):ratio = self.originimage.width/self.originimage.heightif ratio > 1:self.resizeimage = self.originimage.resize((self.curImageSize, int(self.curImageSize/ratio)),Image.NEAREST)else :self.resizeimage = self.originimage.resize((int(self.curImageSize*ratio), self.curImageSize),Image.NEAREST)self.tk_image = ImageTk.PhotoImage(self.resizeimage)self.canvas_imgIndex = self.canvas.create_image(self.curImageCenterPos[0]-self.resizeimage.width/2, self.curImageCenterPos[1]-self.resizeimage.height/2,anchor ='nw',image=self.tk_image)self.__FontChange()self.__createRuler()

上一篇文章提过我希望文字和图片尽量居中，对一张图片我需要在保证原比例的情况下，进行一定放缩，让其居中，并且考虑到还有移动功能，使用 self.curImageCenterPos 来保存图片当前的位置，初始值为 self.curImageCenterPos = (self.cv_width/2,self.cv_height/2)

哦，对了，引入 PIL 下 ImageTk 对象主要是因为 self.canvas 自带的 PhotoImage 和 BitmapImage 支持的图片样式太少, 并且刚好不支持 png 和 jpg 类型

class PhotoImage(Image):"""Widget which can display colored images in GIF, PPM/PGM format."""...class BitmapImage(Image):"""Widget which can display a bitmap."""...

最后我还调用了 __FontChange() 和 __createRuler(), 是因为我画布上只有3个元素 图片，文字，标尺

并且我定义的 图片，文字，标尺 的关系是： 标尺 > 文字 > 图片, 也就是说，标尺 在 文字 之上，文字 在 图片 之上

当 文字 改动的时候，为了防止 文字 遮盖了 标尺，需要在绘制完 文字 之后，再绘制 标尺
当 图片 改动的时候，为了防止 图片 遮盖了 文字 和 标尺，需要在绘制完 图片 之后，再绘制 文字 和 标尺

输入框控件

这里的输入框主要有2个，一个是 文本输入框，另一个是 图片地址展示输入框，以 文本输入 为例：

self.var_text = tk.StringVar()
self.var_text.trace_add("write", self.__FontChange)
ttk.Entry(self.element_frame, textvariable=self.var_text, width = 30).grid(row=1,column=1)

StringVar 是 tkinter 中获取控件值的一个好方法，它很单纯的将控件和控件的值信息隔离开，并且 StringVar 也提供了绑定回调函数等功能

作为文本输入框，当文字改变的时候，需要实时更新画面中的文字信息，所以需要给 self.var_text 绑定一个回调函数 self.var_text.trace_add("write", self.__FontChange)

简单点解释就是指当文本输入框的值被被写入write 的时候，也就是有改动时候会调用我们定义的 self.__FontChange 函数,而关于 __FontChange 函数可以简单看一下

def __FontChange(self, *args):# 删除旧的字体if self.canvas_textIndex :self.canvas.delete(self.canvas_textIndex)if self.var_text.get():f = font.Font(  family = self.var_fontfamily.get(), size = self.var_fontsize.get(),weight = "bold" if self.fontweight_status else "normal",slant = "italic" if self.fontslant_status else "roman",underline = 1 if self.fontunderline_status else 0,overstrike = 1 if self.fontoverstrike_status else 0 )self.canvas_textIndex = self.canvas.create_text(self.curTextPos[0],self.curTextPos[1],anchor="center", text=self.var_text.get(), font=f, fill = self.color_button["background"])self.__createRuler()

在 self.canvas 写文字的时候

需要先将原本的文字删除掉， self.canvas_textIndex 是之前文字在画布上的索引
然后获取文本输入框中的文字信息，结合其他文字属性的信息，生成新的 font.Font() 对象，其中包括文字的 字体，大小，粗细，斜体，下划线，删除线 这些设置
最后在画布上绘制 self.canvas.create_text()
为了防止 文字 将 标尺 遮盖了，重新绘制一遍标尺 self.__createRuler()

下拉菜单控件

下拉菜单有，字体样式的下拉菜单、字体大小的下拉菜单以及移动对象选择的下拉菜单，我这里以字体样式的下拉菜单为例，介绍一下 tkinter 下 combobox 的使用方法

def __createFontFamilyCombobox(self):self.var_fontfamily = tk.StringVar()self.var_fontfamily.trace_add("write", self.__FontChange)# 创建字体的下拉菜单fontfamily_combobox = ttk.Combobox(self.element_frame, textvariable=self.var_fontfamily)fontfamily_combobox['state'] = "readonly"# 获取当前系统中所有的字体，并筛选出首字母是中文的字体           list_families = []for i in font.families():if '\u4e00' <= i[0] <= '\u9fff':list_families.append(i)self.families = tuple(list_families)            fontfamily_combobox['value'] = self.families# 默认选用 微软雅黑字体try:currentindex = self.families.index("微软雅黑")except:currentindex = 0fontfamily_combobox.current(currentindex)return fontfamily_combobox

字体样式下拉菜单 fontfamily_combobox ：

绑定一个 self.var_fontfamily 对象，并且当值改变的时候调用 self.__FontChange
fontfamily_combobox 设置为只读状态，防止用户输入导致样式被改动
通过 font.families() 获取当前系统所有字体样式
系统的样式太多是一方面原因，另一方面原因是我大部分都是中文，而且恰好字体名称此时一般也是中文，所以我筛选出中文的字体名称
最后下拉菜单默认值设置为 微软雅黑

颜色选择器

颜色选择器，tkinter 也提供了超简单的对象 colorchooser，仅仅需要一行代码 colorchooser.askcolor(), 简单看一下我摘录出的部分代码

from tkinter import colorchooser...
self.color_button = tk.Button(self.font_frame, text ="", width = 3, background="#3C70C6",command = self.__ColorChange)
...def __ColorChange(self):result = colorchooser.askcolor()if result[1]:self.color_button["background"] = result[1]self.__FontChange()

我定义了一个按键 self.color_button, 这个按键的背景色就是当前文字的颜色，并且点击的时候调用 self.__ColorChange() 函数

打开颜色选择器，判断用户选择结果
结果不为空的时候，将得到的颜色结果（ result 的结构 ((128.5, 0.0, 255.99609375), '#8000ff') ），也就是 result[1] 赋给 self.color_button 的背景色 background 属性
最后重新绘制一下画布上的文字即可

按键样式

我最初的本意是实现 windows 下自带的 画图 中对文本的编辑功能的样式，最后功能实现了，但是在样式上还是有点不太如意

先看一下我的实现,我也还是摘录出的部分代码

def __changeFontweightStyle(self):if not self.fontweight_status:self.fontweight_checkbutton['style'] = 'check_bold.TButton'else:self.fontweight_checkbutton['style'] = 'bold.TButton'self.fontweight_status = bool(1-self.fontweight_status)self.__FontChange()# 粗体
def __createFontBoldCheckButton(self):self.fontweight_status = Falsettkstyle = ttk.Style()ttkstyle.configure('bold.TButton', font=('宋体', 8, 'bold'))ttkstyle.configure('check_bold.TButton', font=('宋体', 8, 'bold'),background ="#0078D7")self.fontweight_checkbutton = ttk.Button(self.font_frame, text ="B", style='bold.TButton', width=2, takefocus=False,  command = self.__changeFontweightStyle)return self.fontweight_checkbutton

我就是单纯使用 ttk.Button 按键来实现的，通过点击改变不同的样式，来实现选中和未选中的样式

takefocus 设置成 False 是不想按键在焦点的情况下出现虚线的外框
style 就是设置按键的样式

最后效果不太理想的原因主要就是 ttk.Style() 是可以设置整体控件的风格，主要是以下几种

('winnative', 'clam', 'alt', 'default', 'classic', 'vista', 'xpnative')

而我使用风格 vista 虽然按键更好看，但是背景色这个属性 background 显示的就是不太明显，当我在设置其他风格的时候，就比较明显了,但是不好看

感觉还是我对 ttk.Style 的用法存在问题

保存图片

保存图片我使用的是比较原始的办法，直接截图，截取画布区域保存成图片

def __saveImage(self):self.__clearRuler()self.canvas.update()# 获取初始位置x0 = self.root.winfo_rootx() + self.canvas.winfo_x()y0 = self.root.winfo_rooty() + self.canvas.winfo_y()# 获取结束位置x1 = x0 + self.canvas.winfo_width()y1 = y0 + self.canvas.winfo_height()size = (x0, y0, x1, y1)pic = ImageGrab.grab(size)pic.save("./cover.png")self.__createRuler()

因为保存图片的时候不能将 标尺 也保存下来，所有先清空 标尺 ，然后找出画布 左上角，右下角 的2个点，截图，保存图片

其实使用截图会存在一个问题，因为是通过截取桌面指定区域来实现的保存图片，所以当 canvas 不能完整在桌面上显示的时候，截图的结果其实就错误了，如下图

这也是我在上一篇提到的选择 940:400 大小画布的原因

现在电脑的屏幕分辨率最少都是 1366*768, 在 2.35:1 的前提下我们将画布大小固定在 940:400，这样封面大小感觉在电脑上呈现时应该还不错

我需要保证最后画布可以完整的展示在桌面上

当然最后保存图片也有其它的实现方式

比如通过 PIL 生成底片，然后对应将导入的图片和写入的文字直接写到底片中，用户对应的操作，也对应在该底片上操作，最后保存图片也可以，但是我觉得还是比较麻烦；
或许 canvas 提供类似于获取画布上所有信息的简单接口，直接保存图片也可以，但是在看 canvas 接口的时候没有太仔细去找

所有选择 截图 这种比较容易讨巧，但是可能会有风险的方案了

打包细节

因为最后我只想打包出一个 exe 的文件，那么我使用到图片等资源文件也需要想办法打包到 exe 中，所有第一时间想到的办法是，将图片通过 base64 编码成二进制信息，并且以文件名作为二进制字符串的对象名，保存到一个 python 文件中

所以先简单实现一个转换的脚本 pictobase64.py

import base64
import glob
import os# 使用 pyinstaller 时将资源文件直接导入到 exe 时执行的脚本
# 执行此文件，生成 `resource.py` 文件# 需要导入到 EXE 的图片地址
import_pictures = glob.glob(r'./resource/*')# 导出途径
target_path = r'./resource.py'# 删除旧的文件
if os.path.exists(target_path):os.remove(target_path)# 以追加的形式将通过 base64 转换后图片信息存储导出的文件中
with open(target_path,"a+") as f:for file_path in import_pictures:# 以 文件名称_文件类型 作为二进制信息的对象名file_name = (os.path.split(file_path)[-1]).replace('.', '_')with open(file_path,"rb") as pic:b64str = base64.b64encode(pic.read())write_data = f'{file_name} = {b64str}'f.write(write_data)f.write('\n')

我们将 ./resource/ 路径下的所有的文件通过 base64 编码成二进制信息后存入 resource.py

使用起来也还算简单，通过执行 pictobase64.py 生成 resource.py 文件，导入 from resource import *

写一段简单的测试代码

import tkinter as tk
from PIL import ImageGrab, ImageTk, Image
from resource import *
import base64root = tk.Tk()
root.iconphoto(True, ImageTk.PhotoImage(data=base64.b64decode(logo_ico)))
root.title("一键生成微信公众号封面")
root.geometry('960x520')
root.resizable(0,0)
root.mainloop()

总结

主要总结了一些我觉得还挺值得记录的细节，可能介绍的有点乱，感兴趣的可以自己看一下源码

完整的源码地址：https://github.com/catcheroftime/CreateWxCover