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

先说痛点,写完一篇公众号,都要为其配一个封面,而我的封面已经很简单了,大部分情况下都是 文章题目 + 背景图片 的形式,简单使用 PS 也会,但是每次还要调整图片大小,文字样式,大小等等还是太繁琐,最好给一张 图片 + 文字 按照一定大小,位置直接生成就完事了

这一篇主要是确定自己的需求,和实现的这些需求需要用到一些 python

操作界面

这个工具在我的脑海里可能只有几个简单的按钮,所以直接选择 python 自带的 tkinter

tkinterPython 的标准 GUI 库,这意味着,只要安装了 Python, 它就自带这个库,不用再额外下载安装 pip install

图片尺寸

封面的图片尺寸是有一定要求的
在这里插入图片描述

所以为了方便最后生成的图片直接为 2.35:1,并将图片、文字比较核心的内容尽量放在 1:1 区域中

因为我提供一个比较简单的界面,其中必然会有一个类似画布的控件来呈现最后需要导出的图片,刚好 tkinter 中存在 Canvas 来呈现图片

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

资源导入和控制

我的封面仅仅只需要文字和图片,那么图片和文字应该由我来输入

图片

  • 点击按键 (使用 tkinter 中的 Button) 弹窗 (使用 tkinter 中的 filedialog) 选择图片
  • 图片在 1:1 下也能完整展示
    主要因为微信公众号封面除了 2.35:1 还需要一个 1:1, 所以最好对提供的图片进行一定的放缩,保持长宽不变的放缩,考虑到画布是 940:400, 图片放缩后的比例比如 300*300,并且居中显示

关于图片的放缩控制等,可以直接使用 python 下的一个第三方图像处理库 PIL(Python Image Library), 而它提供的 ImageTk 对象也支持在 tkinterCanvas 上直接绘制

文字

提供一个输入框 (使用 tkinter 中的 Entry),让用户输入,并且可以提供类似于 windows 下自带的 画图 中对文本的编辑功能,文字的 字体粗细斜体下划线大小颜色 等等,文字也最好一直是在图片上面显示,避免被图片遮盖

在这里插入图片描述

  • tkinterCanvas 提供了 create_text 来直接绘制文字,并且可以设置字体的样式等功能
  • 颜色选择器 可以直接使用 tkinter 中的 colorchooser 对象
  • 文字的字体的选择和大小可以使用 tkinterCombobox(下拉菜单) 控件

控制

  • 默认情况下导入的图片和文字都是默认居中
  • 可以提供这2个对象移动的功能,上下左右移动,指定其中一个移动或者两个一起移动,以及每次移动的单位控制
  • 可以调整大小
    • 文字在编辑功能中会提供大小选择
    • 图片的话就需要提供放大缩小的功能

标尺

  • 用标尺在画布上标记出中央 1:1 的两条线,以及横着的一条中轴线,这样可以避免在移动过程中图片或者文字出现较大位置偏差。
  • 最后导出图片时,标尺的线不能在图片中

成品初版

在这里插入图片描述
工程地址: https://github.com/catcheroftime/CreateWxCover

详细的代码介绍会放在之后一篇文章中展开

结果展示

最后保存的图片将标尺去掉,图片大小是预料中的 940:400 (2.35:1), 并且测试的移动等功能也和预期效果差不多

在这里插入图片描述

进一步

为了更方便,在打包成 windows 下的可执行程序,一般情况下会使用2个工具, pipenv 以及 pyinstaller

  • pipenv 的目的主要是为这个项目隔离出一个干净的 python 环境, 防止打包一些不必要的第三方库
  • pyinstaller 就是我们打包时需要用到的库
# 项目路径下命令行
# 创建虚拟环境
pipenv install
# 打开虚拟环境
pipenv shell
# 安装我们唯一使用到的一个第三方库 Pillow (PIL)
pip install Pillow
# 安装打包工具
pip install pyinstaller
# 打包
pyinstaller -F -w -i icon.ico cover.py

总结

以为写起来挺简单的,结果在 tkinter 上折腾了太多时间,和 Qt 的控件在上手难度方面的差距还是能感受到的

回味一下,这个工具好像就是帮我一键创建好指定大小的图层,然后一键将我的文字和图片居中,然后就没有然后了,也算是方便了很多了~

在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
微信公众号提供了微信登录的功能,用户可以通过微信扫码登录公众号网站,无需输入账号密码。具体实现步骤如下: 1.在微信开放平台注册开发者账号,并创建一个公众号。 2.在公众号设置中,开启网页授权和JS接口安全域名,并设置授权回调页面域名。 3.在网站中引入微信JS-SDK,并通过config接口进行配置。 4.在网站中添加微信登录按钮,并通过微信JS-SDK的扫码接口生成二维码。 5.用户使用微信扫描二维码后,网站通过微信JS-SDK的回调接口获取用户的openid和access_token。 6.网站根据openid和access_token进行用户登录或注册。 下面是一个简单的示例代码: ```html <!-- 引入微信JS-SDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> // 配置微信JS-SDK wx.config({ debug: false, appId: 'your_appid', timestamp: 'your_timestamp', nonceStr: 'your_noncestr', signature: 'your_signature', jsApiList: ['scanQRCode'] }); // 点击微信登录按钮 $('#login-btn').click(function() { // 调用微信扫码接口 wx.scanQRCode({ needResult: 1, scanType: ['qrCode'], success: function(res) { // 获取扫码结果中的openid和access_token var openid = res.resultStr.split(',')[1].split(':')[1].replace(/"/g, ''); var access_token = res.resultStr.split(',')[2].split(':')[1].replace(/"/g, ''); // TODO: 根据openid和access_token进行用户登录或注册 } }); }); </script> <!-- 微信登录按钮 --> <button id="login-btn">微信登录</button> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会偷懒的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值