更高效地做图文笔记/教程

前言


在一段尝试之后,我感觉在自己的网站上记笔记有着传统笔记不可比拟的优势。例如,我可以方便的截图,也能更快的把想要记的东西输入进去。还有,前者有着高度的便携性——我可以在坐公交或者空闲的时间看一看。但是后者,我不可能随身揣着一笔记本。就算在不能携带手机的情况下(现在除了学生几乎没有这种场景吧),也可以打印出来。此外,还有很多的优势就暂且不说。

当然,图文最浪费时间的还是在图上。因为要截图、压缩、上传、嵌入到文章中。我自己做完后面这三个步骤,就得花二三十秒,很是麻烦。

这篇文章,会推荐几个我认为很方便的工具/软件;也会大概提供一个思路,如何一键式压缩上传图片。

截图工具


如果你还在用 QQ 自带的截图工具的话,那建议你还是赶紧换换。它的优势在于:你有什么东西想跟你朋友分享,可以立即截图。但它不适合做笔记/教程用的图片。

我推荐的一款截图工具,叫做“Snipaste”。你可以随意的更改字体大小、随意的更改笔刷粗细,而不是固定的几个选项。如果某些图片上有的知识点不需要截图,但需要记录;或者做教程的时候,需要看着图片写步骤,你可以将它“贴在屏幕上”,类似于这样:

snipaste

至于更多的操作,官方文档已经写得很清楚了。你可以去官方网站下载,并且自己按照文档体验一番。

压缩图片


我比较喜欢截一张不压缩的原图,但是这样体积又太大了。好在有一个叫做“TinyPNG”的网站,它压缩的图片体积能小很多,但是图片肉眼看起来不会有太大差别。比如,上一张图它有 3.8M 大小,但压缩后只有 64.1KB,几乎缩小了 98%。它有一个小要求:每次最多上传 20 张图片,每张不超过 5M。

不过 TinyPNG 真的是业界良心,它提供了 API 供我们使用,而且不限制图片大小及张数。你只要打开网站,点击上面的“Developer API”,按要求输入用户名和邮箱,即可获得“API Key”。如果你没记住也不要紧,只要登陆后点击右上角你的用户名,选择“Account page”,第一个引入眼帘的就是“API Key”。

GIF 录制/压缩


有时候,一张 GIF 更能让自己/别人理解的更透彻。这里我推荐的是一款叫做 ScreenToGif 的软件。我建议下载第一个 Msi 安装版,记得把 FFmpeg 勾选上,也就六十来 M 大小,但是导出的时候选择它,质量会好很多。使用很简单,自己摸索一两分钟就会用了,便不再赘述。

当然,GIF 肯定要比普通的图片要大,所以还得压缩。这里我推荐使用 docsmall 提供的 GIF 压缩服务。制作并压缩后,效果类似这样(用 FFmpeg 导出,原 GIF 大概 22M):

压缩过的 GIF

(是小天使,我死了!)

图片上传


图片做好了,总得上传吧!但用 WordPress 自带的“媒体”效率好像过于低了点,所以还是推荐用图床——最好还是有 API 的。不管你是自己搭还是用别人的,API 会为你省去将近一半的时间。

用 Python 更方便的压缩图片


众所周知,官方文档还是很重要的。我是用 Python 写,所以就参考“PYTHON”部分了。

我的逻辑是这样的:把需要压缩的文件夹和压缩后存放图片的文件夹输入进去,等截到新的图后,按一个键自动压缩。这样就省去很多时间。当然,这只是我个人的习惯,如果喜欢覆盖原图直接覆盖即可~
Python 苦手者,写的好看不好看就不要追究了,能跑就行 :xdsx:

写了两个函数,放在 functions.py 中:

import tinify
import os
import requests

def compress(img_path_list, output_path, api_key):
    '''传入图片路径和输出路径,压缩图片并存储。

    Args:
        img_path: list, 需要压缩的图片的列表。
        output_path: str, 压缩后图片存放路径。
        api_key: str, 申请到的 TinyPNG 的 API Key。
    
    Return:
        返回一个布尔值,来表示是否成功压缩。像是这样:
        True
    '''
    tinify.key = api_key

    total_num = len(img_path_list)
    compress_num = 1
    for img_path in img_path_list:
        print("compressing({}/{}): {}".format(compress_num, total_num, img_path))
        source = tinify.from_file(img_path)
        source.to_file(output_path+os.path.basename(img_path))
        compress_num += 1
        print("Done")
    return True

def auto_compress(img_path, output_path, api_key):
    '''有新的图片加入后,按下任意键自动压缩图片。
        
    Args:
        img_path: list, 需要压缩的图片的列表。
        output_path: str, 压缩后图片存放路径。
        api_key: str, 申请到的 TinyPNG 的 API Key。

    Return:
        没有返回值。
    '''
    old_img_list = []

    for root, dirs, files in os.walk(img_path):
        for name in files:
            old_img_list.append(os.path.join(root, name))

    print("Now you can add new image(s) to the path which you input.")

    while True:
        status = input("Press any key to compress, or n for exit: ")
        img_path_list = []
        for root, dirs, files in os.walk(img_path):
            for name in files:
                img_path_list.append(os.path.join(root, name))
        if status == 'n':
            break
        else:
            compress_list = [img for img in img_path_list if img not in old_img_list]
            print(compress_list)
            if compress(compress_list, output_path, api_key) == True:
                print("--------------- All new images have been compressed ---------------")
                for compressed_img in compress_list:
                    old_img_list.append(compressed_img)

再写了一个 main.py:

import functions

# 这里填入你申请到的 API
key = ""

# 路径可用"/"隔开,最后需用"/"结尾
# img_path 是未经压缩的图片路径
img_path = ""
# img_path 是压缩过的图片路径
output_path = ""

functions.auto_compress(img_path, output_path, key)

之后的流程:运行 main.py -> 截图 -> 按下任意键 -> 压缩成功。这样就省了一部分时间。

自动上传到图床


上一步只是自动压缩,如果压缩后能自动上传到图床,并返回一个链接或者一个写好的“<img>”标签,岂不美哉?

然而我照着我用的图床的 API 文档撸了二十分钟,也没传上去。可能是我姿势不对?这里只是提供一个思路,如果成功后再放代码。

点赞
  1. 散逸说道:
    Google Chrome Android 10
    写作还是用Typora,md语法高效优雅 :xdsss:
    1. Yusorai说道:
      Google Chrome Windows 10
      一直有听说 Markdown,不过一直没用过。看来以后有时间得学学了 :xdsx:
  2. BluesDawn说道:
    Google Chrome Windows 10
    python啊,有要学的计划 ∠( ᐛ 」∠)_
    1. Yusorai说道:
      Google Chrome Windows 10
      Python 还算挺好入门的,用不了多久就能自己写点东西玩了。不过要用好还是得花很多精力啊 :xdsx:
      1. BluesDawn说道:
        Google Chrome Windows 10
        嗯嗯
  3. 特厉害说道:
    Google Chrome Windows 10
    你可以把路径改成在 `main.py` 中使用 `sys.argv` 接收命令行参数,这样就不用每次编辑 `.py` 文件了。
    1. Yusorai说道:
      Google Chrome Windows 10
      新的知识增加了! :xdsz:

回复 Yusorai 取消回复

电子邮件地址不会被公开。必填项已用 * 标注