对于经常写blog童靴来说md是一个很好格式化文档的文件格式，这里就会遇到写文档是需要上传图片的情况。
这里使用picgo来集成到vscode来实现自主上传图片方便编写md。
安装vscode以及插件
安装vscode直接参考官网说明即可。
插件使用的是PicGo
配置图床信息
打开vscode的用户配置，修改如下参数，这里以腾讯云的cos对象存储来说明1
2
3
4
5
6"picgo.picBed.tcyun.appId": "自己的appid",
"picgo.picBed.tcyun.area": "桶所属地域",
"picgo.picBed.tcyun.secretId": "个人秘钥",
"picgo.picBed.tcyun.secretKey": "个人秘钥",
"picgo.picBed.tcyun.bucket": "桶存储名称",
"picgo.picBed.current": "图床类型"
上传命令
| os | 上传剪切板图片 | 上传本地图片 | 上传来自输入框图片 |
|---|---|---|---|
| win/unix | ctrl+alt+u | ctrl+alt+e | ctrl+alt+o |
| osx | cmd+opt+u | cmd+opt+e | cmd+opt+o |
选择截图工具
对于mac系统选择ishot或者系统自带的截图，前者功能更大，有马赛克，标注功能。xnap也可以使用，但是有部分功能是收费的。
对于windows用户使用Snipaste，轻量级，功能也十分强大。
截图如何添加水印
为了防止盗图，可以添加水印来保护权益。
这里参考了两种方式，一种是使用scf云函数来实现，在文件上传到图床cos之后触发函数来添加水印，但是这种有个缺点就是为了防止事件的重复触发，需要增加上传到另一个bucket，同时需要修改picgo返回的url。
优点：水印只操作一次
缺点：需要手工修改url地址，图床需要存储两份，需要额外部署
ps：注意使用云函数的时候需要关闭cos的日志功能，不然会产生大量的调用。
另一种方法是使用数据万象添加水印的接口，原理是在上传到cos之后，直接在原由的url后面追加水印的接口参数，这样每次从cos下载图片的时候都会走一次接口加工生成带水印的图片。
优点：方便部署，添加方便
缺点：每次引用图片都需要调用一次，如果量不大的比较适合
ps：这里有个地方比较坑的是，csdn有自己的图片转存机制，使用数据万象的水印技术的话，水印是会过滤的，因为在图床的图片就是原始图片。
然后比较这两种方式的收费方式
这里看了下腾讯云的数据万象的水印免费额度是10TB/月，对于个人博客或者流量不大的，可以认为是足够的。
云函数的话统计的维度是资源使用量跟调用次数，前者是每月40万GBs，后者是每月100万次，后面的指标比较好理解，而资源使用量是
资源使用量 = 函数配置内存 × 运行时长
这个水印代码不是很复杂，而且又是在腾讯云的服务操作（下载字体，加水印，上传水印图片）平均下来执行时的时长平均下来不到30ms，执行内存也只要25M，按照这个公式，可以支持的调用次数是
25/1024*30/1000=0.00073G，这样就要调用次数是548w次。
以下是我实际部署运行情况：
所以选择使用哪种对于个人使用都是足够的。
scf的示例代码
因为可以自定义字体，这里提供一个酷炫的字体体验网站1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101# -*- coding: utf8 -*-
# SCF configures the COS trigger, obtains the file uploading information from COS, and downloads it to the local temporary disk 'tmp' of SCF.
# SCF配置COS触发，从COS获取文件上传信息，并下载到SCF的本地临时磁盘tmp
from qcloud_cos_v5 import CosConfig
from qcloud_cos_v5 import CosS3Client
from qcloud_cos_v5 import CosServiceError
from qcloud_cos_v5 import CosClientError
import sys
import logging
# 图片处理
from PIL import Image, ImageFont, ImageDraw
logging.basicConfig(level=logging.INFO, stream=sys.stdout)
appid = 按情况填写 # Please replace with your APPID. 请替换为您的 APPID
secret_id = u'按情况填写' # Please replace with your SecretId. 请替换为您的 SecretId
secret_key = u'按情况填写' # Please replace with your SecretKey. 请替换为您的 SecretKey
region = u'按情况填写' # Please replace with the region where COS bucket located. 请替换为您bucket 所在的地域
token = ''
to_bucket = '按情况填写' + str(appid)
config = CosConfig(Secret_id=secret_id, Secret_key=secret_key, Region=region, Token=token)
client = CosS3Client(config)
logger = logging.getLogger()
# 下载字体文件
font_path = '/tmp/font.ttf'
response = client.get_object(Bucket=to_bucket, Key="font.ttf", )
response['Body'].get_stream_to_file(font_path)
def add_font_watermark(src_path_img, save_path_img, text):
"""
add font watermark into image
:param src_path_img: source path of image
:param save_path_img: saving path of image
:param text: text to add as watermark
:return: null
"""
# 打开图片
im = Image.open(src_path_img).convert('RGBA')
# 新建一个空白图片,尺寸与打开图片一样
txt = Image.new('RGBA', im.size, (0, 0, 0, 0))
# 设置字体
fnt = ImageFont.truetype(font_path, 40)
# 操作新建的空白图片>>将新建的图片添入画板
d = ImageDraw.Draw(txt)
# 在新建的图片上添加字体
d.text((txt.size[0] - 220, txt.size[1] - 80), text, font=fnt, fill=(255, 255, 255, 255))
# 合并两个图片
out = Image.alpha_composite(im, txt)
# 保存图像
out.save(save_path_img)
def main_handler(event, context):
logger.info("start main handler")
for record in event['Records']:
try:
bucket = record['cos']['cosBucket']['name'] + '-' + str(appid)
key = record['cos']['cosObject']['key']
key = key.replace('/' + str(appid) + '/' + record['cos']['cosBucket']['name'] + '/', '', 1)
logger.info("Key is " + key)
# download object from cos
logger.info("Get from [%s] to download file [%s]" % (bucket, key))
download_path = '/tmp/{}'.format(key)
upload_path = '/tmp/wm_{}'.format(key)
try:
response = client.get_object(Bucket=bucket, Key=key, )
response['Body'].get_stream_to_file(download_path)
logger.info("Download file [%s] Success" % key)
# 增加水印
add_font_watermark(download_path, upload_path, "by Roger Luo")
logger.info("Add watermark file [%s] Success" % key)
# 上传水印图片
response = client.put_object_from_local_file(
Bucket=to_bucket,
LocalFilePath=upload_path,
Key=key
)
logger.info("Upload file [%s] Success" % (key))
except CosServiceError as e:
print(e.get_error_code())
print(e.get_error_msg())
print(e.get_resource_location())
return "Fail"
except Exception as e:
print(e)
print('Error getting object {} from bucket {}. '.format(key, bucket))
raise e
return "Fail"
return "Success"
生成图片效果如下：
使用数据万象的水印接口
输入一个cos的url地址，返回一个代签名的url1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36def get_water_mark_from_ci(src_url_img, text):
"""
数据万象-水印接口
:param src_url_img: 输入源地址
:param text: 水印内容
:return: 返回调用地址
"""
# 基本配置
# 水印内容
text = base64encode(text)
# 字体
font = base64encode('simfang仿宋.ttf')
# 字体大小
fontsize = 50
# 字体颜色
fill = base64encode('#3D3D3D')
# 文字透明度
dissolve = 100
# 水印位置 默认 SouthEast（右上角）
gravity = 'southeast'
# 水平（横轴）边距，单位为像素，缺省值为0
dx = 0
# 垂直（纵轴）边距，单位为像素，默认值为0
dy = 0
# 平铺水印功能，可将文字水印平铺至整张图片。当 batch 设置为1时，开启平铺水印功能
batch = 0
# 文字水印的旋转角度设置，取值范围为0 - 360，默认0
degree = 0
result = None
result = src_url_img + '?watermark/2/text/{}/font/{}/fontsize/{}/fill/{}/dissolve/{}/gravity/{}/dx/{}/dy/{}/batch/{}/degree/{}'\
.format(text, font, fontsize, fill, dissolve, gravity, dx, dy, batch, degree)
return result
