图床 on Linkzz's Blog

使用Oracle对象存储作为博客图床（二）

Wed, 09 Aug 2023 09:03:11 +0000

前言

上一章我们已经做到了使用 picgo 上传图片并获得一个可以公开访问的链接，这章介绍如何使用 CloudFlare 代理图片的访问并加上自定义域名，以及录屏转 gif 的方法。

CloudFlare 代理访问

创建一个 Cloudflare Workers，代码如下：

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    const path = url.pathname.replace("/blog/", "");

    const originUrl = `${env.OBJECT_STORAGE_BASE_URL}${path}${url.search}`;

    const res = await fetch(originUrl);

    return new Response(res.body);
  },
};

以上代码功能是将访问的 url 去掉存储桶名称，通过 workers 获取内容并返回给访问者，充当了一个代理的角色，这样我们可以使用自定义的域名来替代甲骨文对象存储的访问域名，以后换了图床供应商也方便切换，因为博客里的链接是不用改的。

部署完之后需要配置环境变量OBJECT_STORAGE_BASE_URL的值为上文的访问地址，一直到/o/处，如：

现在你可以使用 works 提供的域名作为图片前缀访问，也可以自定义域名，该功能只限于你自己的域名是由 CloudFlare 托管解析的才可，如果已经使用 CloudFlare 作为域名解析商，在 works 配置的Custom Domains配置即可，CloudFlare 会自动生成 Https 证书。

配置好之后将picgo的配置文件的urlPrefix改为上面的域名：

{
  "aws-sr3": {
    "accessKeyID": "{ak}",
    "secretAccessKey": "{sk}",
    "bucketName": "blog",
    "region": "ap-chuncheon-1",
    "uploadPath": "images/{year}/{month}/{md5}.{extName}",
    "endpoint": "https://{ns}.compat.objectstorage.ap-chuncheon-1.oraclecloud.com/",
    "acl": "public-read",
    "pathStyleAccess": true,
    "urlPrefix": "https://img.linkzz.eu.org",
    "disableBucketPrefixToURL": true
  }
}

GIF 图制作

有时候我们有录屏制作 gif 的需求，不管你在什么平台，总有软件满足制作 gif 的需求，这里我只是介绍我的方法，如果你觉得麻烦，以你自己的方法为准。

录屏

windows 商店有一个录屏软件叫截图工具，可以区域录屏，一般自带了这个 UWP 程序。

打开他选择“视频”之后点击“新建”，画出录屏区域点击“开始”即可对所画区域录制，点击“结束“就可以预览视频，点击保存，之后使用MP4 转 GIF 工具即可得到 GIF。

MP4 转 GIF

我使用的是 ffmpeg + Gifski

ffmpeg

ffmpeg - 大名鼎鼎的图像处理软件不用我多介绍了吧，使用他可逐帧提取视频图片：

ffmpeg -i video.mp4 farme%04d.png

Gifski

Gifski - Gifski 是一个开源的视频转 GIF 工具，可以生成高质量 GIF，我们使用的是他的命令行版本。

如果你已经安装了rust，可以使用cargo安装

cargo install gifski

或者你可以从 github 的release页面选择相应平台的安装包安装

使用 ffmpeg 生成的套图生成 gif:

gifski -o output.gif frame*.png

下面是演示：

这样就可以将你的 gif 上传到图床，通过自己的域名愉快的访问啦！

结语

至此 Oracle 对象存储就算是利用起来了，其免费 20G 的额度对我这种小流量个人博主来说够用了(~~其实只是想白嫖~~)，当然目前来看访问速度作为图床来看还是太慢了，不过也不要钱，还要啥自行车😂

使用Oracle对象存储作为博客图床（一）

Tue, 11 Jul 2023 16:20:02 +0000

先看效果：

作为一个专业白嫖党，只使用 Oracle 的 4 个免费鸡怎么能满足呢，拥有 20GB 免费空间的对象存储当然也要利用起来，正好最近又重拾起了鸽了多年的博客，正好作为博客的图床。

前置条件

一个 Oracle Cloud 账号（需要信用卡认证，大陆已经很难申请了）
良好的科学环境

Oracle Object Storage 存储桶准备

进入 Oracle Cloud 对象存储管理界面，创建新的存储桶

默认配置即可，创建完之后编辑可见性，这里可以选择公开或者私有，公开：所有文件允许读取私有：可使用预先验证的请求实现部分文件公开（推荐这种方式）
创建预先验证的请求

选择具有前缀的对象，前缀填写images,下文配置 picgo时需要匹配这个前缀，否则会有权限问题，访问类型默认只读即可，到期时间尽量一步到位多配几年。

将 URL 复制保存，这即时存储桶相应前缀目录访问的 BaseURL

上传一个图片试一下能否访问

可以看到由于存储桶的权限设置，使用 URL 路径访问是行不通的

需要替换为刚才创建的预见请求的 URL 前缀 https://objectstorage.ap-chuncheon-1.oraclecloud.com/p/xxx/n/{namespace}/b/blog/o/images/2022-05-23.png
存储桶 Endpoint 甲骨文的对象存储 endpoint 模式为https://{namespace}.compat.objectstorage.{region}.oraclecloud.com/

namespace: 存储桶信息名称空间字段
region: 这个是你甲骨文账号的区域，通常在你的 Oci 的 console 地址里就有体现，如我的春川为ap-chuncheon-1

申请 Oracle 账户 Ak 和 Sk右上角头像，进入“我的概要信息“，”客户密钥“选项”生成密钥“

同样保存已生成密钥，该密钥为账户的SecretAccessKey

AccessKeyID在列表页，同样复制保存

安装配置 Picgo 和 s3 插件

准备工作完成，下面开始配置图床工具。这里有两种选择：

具有 GUI 界面：PicGo
Cli 命令行操作：PicGo-Core 上面两种看个人喜好，我比较习惯命令行，所以选择第二种，配置方面都是一样的，区别为是否提供了GUI，

安装 Node 环境

自行按nodejs官网安装

安装 Picgo-Core

npm install picgo -g

或者使用 Yarn

yarn global add picgo

验证安装

picgo -h

出现以下结果表明安装成功

添加 S3 插件

s3 插件理论上支持所有兼容 S3API 的对象存储，具体参看插件主页

picgo add s3

安装成功之后配置文件含有以下信息

配置 s3 插件

{
  "picBed": {
    "uploader": "aws-s3",
    "current": "aws-s3",
    "aws-s3": {
      "accessKeyID": "{ak}",
      "secretAccessKey": "{sk}",
      "bucketName": "{bucket}",
      "region": "{region}",
      "uploadPath": "images/{year}/{month}/{md5}.{extName}",
      "endpoint": "https://{namespace}.compat.objectstorage.{region}.oraclecloud.com/",
      "acl": "public-read",
      "pathStyleAccess": true,
      "urlPrefix": "https://objectstorage.ap-chuncheon-1.oraclecloud.com/p/{publicKey}/n/{namespace}/b/blog/o",
      "disableBucketPrefixToURL": true
    }
  },
  "picgoPlugins": {
    "picgo-plugin-s3": true
  }
}

上面配置除了uploadPath字段，其他地方的占位符号"{}“应替换为相应值:

ak: 上文申请的甲骨文账号AccessKeyID
sk: 上文申请的甲骨文账号SecretAccessKey
bucket: 桶名称，我的这里就是blog
region: 上文获取的region区域，我这里是ap-chuncheon-1
uploadPath 的占位符不需要修改，且注意前缀 images 一定要匹配上文预先验证的请求处的前缀
namespace: 上文获取的 namespace
urlPrefix: 这个字段为预先验证的请求处申请的 URL 前缀
disableBucketPrefixToURL: 这个字段必须为true,否则上传链接自动添加桶前缀导致访问失败，具体可看这个Issue

验证配置

截图工具随意截图到剪贴板

picgo upload

上传剪贴板图片

访问图片链接成功

到此就实现图床最基本的功能了，搭配任意编辑器都可使用图床了，只是稍显麻烦，如果在编辑器中复制上传，成功后即刻显示图片体验会更好。下面我们使用 Obsidian 搭配对应插件实现上面功能。

安装配置 Obsidian

下载安装Obsidian

关闭安全模式搜索”Image auto upload Plugin“插件安装

插件配置

默认上传器选择PicGo-Core

结语

至此使用 Oracle 作为对象存储教程已经完成，但是还是有些缺陷，如图片访问效果不理想，因为甲骨文的对象存储不支持 cdn，导致不同区域访问效果不同。下一章我们使用 CloudFlare 加速我们的图片访问，以及特殊情况下制作 GIF 上传的方法。