使用腾讯云COS搭建Webp私有图床

·  阅读 63

准备工具

  1. 准备一个图床工具,推荐本人使用的开源免费工具:uPic

    该工具可以直接在github上下载,访问地址:github.com/gee1k/uPic

  2. 购买腾讯云cos对象存储服务(注:新个人用户有 免费的存储额度哦)

    如果需要了解产品功能与价格明细,访问地址:cloud.tencent.com/product/cos

使用cos搭建存储环境

创建存储桶

  1. 登录腾讯云控制台,进入对象存储服务

    BfdPsryXKVhE

  2. 进入存储桶列表,点击创建存储桶

    dEJH36BgPvZ1

  3. 填写存储桶所属区域、名称与访问权限等信息

    lpVAqFoa3Ej5

    • 所属地域可以选择离你更近的城市区域(推荐:如果你使用云服务器上其他服务想依赖cos对象存储,那么尽量选择 同一个区域
    • 访问权限方式选择 公有读和私有写 (因为我们是作为博客文章中的图床使用,需要对外匿名读取),私有读写 方式会进行签名认证,更加安全,适用于API、SDK场景
    • 建议后面开启防盗链功能,防止恶意用户盗刷图片,以免浪费自己的流量

    ==>依次点击下一步,其他字段可以忽略,创建存储桶成功

    ibbcSbFA5fzo

  4. 通过桶列表中上传文件按钮上传一张本地图片

    iJL6E5zuMCnl

  5. 点击预览按钮打开并访问图片,至此存储桶搭建成功

    i3lDqS95SxbM

安全管理

  1. 开启跨域访问CORS

    pssfFEfs3zM2

    • 来源Origin填写自己博客服务器的域名或者ip地址(根据实际情况填写)
    • 操作Methods根据相关服务请求方式选择(如果只是作为一个图床,那么选择 GET
  2. 开启防盗链

    HlyTGsaAaYmf

    • 打开防盗链,类型选择 白名单Referer里面与上面 来源Origin类似,填写对应的域名或者ip地址

webp图片处理

  1. 使用数据处理中的 图片处理功能,新增图片处理模板

    截图Ave17j

    • 开启有趣的功能-盲水印,盲水印是一种特殊水印方式,能够将水印图以不可见形式添加至图像频域,在图片被攻击后仍可进行水印图提取,进行 鉴权追责
    • 根据自身情况勾选需要添加的样式处理能力,比如图中勾选的:格式转换、质量变换、盲水印、去除元信息等等
    • 格式转换选择 webp压缩格式,webp是一种新型的提供 高效无损压缩格式,已经被大部分浏览器支持,相比于 jpgpng有更小的图片体积,当 webp 将 jpg 压缩到相当于原图 90% 质量 时,图片体积减少了 50% 左右。当 webp 将 jpg 压缩到相当于原图 80% 质量时,图片体积则减少了 60%~80%
    • 质量转换可以调整输出质量,越低图片质量越差,推荐 70%-80%,进一步减少图片体积
    • 盲水印可以选择 图片水印或者 文字水印 ,推荐使用 图片半盲水印 ,选择一张图片上传即可
  2. 使用任务与工作流,创建工作流,自动化图片处理,执行流程如下:

    idpJzogxBVAc

    根据要求配置工作流,填写工作流名称、输入路径、格式匹配等

    IJaC3T7gIe9l

    • 输入路径,选择输入存储桶中一个source文件夹(巧妙处理: 存储桶中创建两个文件夹,一个 source文件夹用于存放图床工具上传的原始图片,比如png,jpg等等,一个 webp文件夹用户存放经过工作流图片处理之后生成的对应webp格式,我们可以定时 清理source文件夹,节约存储费用)

    • 点击配置工作流中的 “+” 操作,选择刚才创建好的图片处理模板,详情如下:

      mvRl0WJsSLMA

      注意: 根据上面提到的我们选择目标路径为存放 webp的文件夹图片处理模板就是刚才创建的模板文件

  3. 开启工作流的 上传触发执行,就可以实现图片上传时自动帮我们转换到webp格式的图片,完美的实现了 webp私有图床能力

    cZdgWWJ8viZM

使用uPic搭建私有图床

自定义配置

  1. 进入 偏好设置里面的 图床 ,点击 “+” 添加 腾讯云cos

    uiQb9lmBBtR4

    • 存储桶信息的 区域空间名称,根据 创建存储桶实际情况填写
    • 权限认证信息的 secret Idsecret Key, 来自于 腾讯云控制台个人中心 密钥管理中生成
    • 保存路径选择上传到对应的 source文件夹
  2. 进入 偏好设置里面的 高级,点击输出格式自定义 “配置” 实现自定义 Markdown输出格式,大致配置形式如下:

    名称:Markdown

    自定义格式(为什么这么配置大家可以思考一下🤔)

    ![{filename}](存储桶域名/uPic/koris_{filename}.webp)
    复制代码

上传截图文件

哈哈,啰嗦一句:uPic支持多种方式上传图片,比如:右键选择文件、拖拽文件截图文件、命令行等等,并且还支持 上传前压缩上传历史等高级功能,请大家通过官方文档自行了解

  1. 使用截图工具截一张图片,然后点击菜单栏中的如下菜单选项(或者使用 键盘快捷键快速上传,快捷键可以在 偏好设置中自定义):

    7rGX1JyDqiwo

  2. 当上传完成之后,我们去 腾讯云控制台 的cos存储桶下面看source文件夹下的原图和webp文件夹下的web格式的

    mkEcuSJL6XE5

    MdE9DCip8QL4

  3. 最终大功告成,我们实现了通过腾讯云 cos对象存储搭建自己的 高效webp格式私有图床,😄开不开心,意不意外。。。

最后彩蛋

推荐两款自己使用的工具

  • 工具一:同样是开源免费的,功能很强大截图工具 Snipaste,下载地址:zh.snipaste.com
  • 工具二:鼎鼎大名的Markdown写作工具 Typora,不过它好像开始收费了,如果想要免费的,可以尝试下我平时还在使用的另外一款 Notion,下载地址:www.notion.so
分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改