CloudFlare R2 ローカル画像管理マネージャ
概要
CloudFlare-R2-LocalPicManager は、Cloudflare R2(オブジェクトストレージ)と Cloudflare Worker を組み合わせて構築する自前の「図床(画像ホスティング)」管理ツールです。特徴は単一の HTML ファイルで動作するローカル管理画面を提供し、ブラウザから直接画像をアップロード・管理できる点。画像のトリミングや圧縮、形式変換などの軽微な編集をクライアント側で行い、R2 に格納します。加えて Python / Node.js の SDK を使った AI エージェント連携(URL 抓取や Base64 アップロード対応)や Referer チェックによる防盗チェーン機能を持ち、個人ブログなどの用途に最適化されています。
リポジトリの統計情報
- スター数: 8
- フォーク数: 0
- ウォッチャー数: 8
- コミット数: 2
- ファイル数: 8
- メインの言語: HTML
主な特徴
- 単一ファイルのローカル HTML 管理画面でアップロード・削除・リネーム・バッチ操作が可能
- フォルダ(プレフィックス)による整理、ファイル移動、Lightbox によるプレビュー機能
- クライアント側でのトリミング・圧縮・形式変換を内蔵し、サーバー側の依存を最小化
- Python / Node.js SDK を通じた AI エージェント連携と Referer ベースの防盗チェーンサポート
技術的なポイント
Cloudflare R2 と Worker を組み合わせることで、実質的に「サーバーレス」な画像管理基盤を実現しています。基本設計としては、ローカルで動く HTML(PicManager.html)をフロントエンドに置き、ブラウザが Cloudflare Worker のエンドポイントへ直接リクエストを投げる構成です。Worker は R2 バケットを操作するための仲介役を果たし、認可や参照制御(Referer チェックなど)を担います。R2 のオブジェクトキーにはフォルダ名をプレフィックスとして付与することでフォルダ機能をエミュレートし、一覧取得や移動はキー操作で実現します。
画像編集は主にクライアント側のブラウザで処理します。Canvas API やブラウザ内のエンコーダを活用してトリミング、リサイズ、品質調整、フォーマット変換(例:PNG→JPEG)を行い、必要に応じて Base64 または Blob としてアップロードします。これにより Worker/ R2 側の負荷やデータ転送量を削減できます。
AI エージェント連携は picmanager.py(Python SDK)と picmanager.mjs(Node.js SDK)を通じて提供され、外部 URL の取り込みや Base64 データの送信をプログラム的に自動化できます。README にある「OpenClaw Skill」的な拡張を用いると、自然言語での画像管理操作をエージェントに実行させることも可能です。
セキュリティ面では、公開 URL を Worker 側で制御することで無条件公開を避け、Referer による簡易的な防盗チェーンを実装。加えて Cloudflare の無料枠(R2:毎月 10GB、A 操作 100 万回、Worker:毎日 10 万リクエスト)を活用することで、個人利用のコストをほぼゼロに抑えられます。拡張性としては、Worker 内での認証レイヤ追加や JWT 署名、署名付き URL 発行などを組み合わせれば、より高度なアクセス制御や短時間有効のダウンロードリンク発行も実装可能です。
プロジェクトの構成
主要なファイルとディレクトリ:
- .gitignore: file
- PicManager.html: file
- README.md: file
- picmanager.mjs: file
- picmanager.py: file
…他 3 ファイル
PicManager.html が管理 UI の本体で、ブラウザ上でファイル操作や編集を行う実装が収められています。picmanager.mjs / picmanager.py はそれぞれ Node.js / Python 環境から R2 にアクセスするための補助ライブラリやサンプルを含む想定です。Worker 用のスクリプトや設定は README に従って Cloudflare 環境へデプロイする形になります。
まとめ
Cloudflare の無料枠を活かした手軽な自前図床で、個人利用に最適なシンプル設計。
リポジトリ情報:
- 名前: CloudFlare-R2-LocalPicManager
- 説明: 基于Cloudflare R2 + Worker搭建图床管理器,使用本地可运行的HTML即可实现图片上传,文件夹管理,图片二次裁切,复制插图链接等功能。
- スター数: 8
- 言語: HTML
- URL: https://github.com/shynloc/CloudFlare-R2-LocalPicManager
- オーナー: shynloc
- アバター: https://avatars.githubusercontent.com/u/600137?v=4
READMEの抜粋:
CloudFlare-R2-LocalPicManager — 自建图床(Cloudflare R2 + Worker)
基于 Cloudflare R2 对象存储 + Cloudflare Worker 的免费自建图床方案,附带单文件 HTML 管理界面和 AI Agent 集成支持。
免费额度:R2 每月 10GB 存储 + 每月 100 万次 A 类操作免费,Worker 每天 10 万次请求免费。个人博客图床完全够用。
功能
- 图片管理:上传、删除、重命名、批量操作
- 文件夹:创建/删除文件夹,在文件夹间移动文件
- 预览:Lightbox 全屏预览,支持键盘导航
- 图片编辑:裁剪、压缩、调整尺寸、格式转换(内置,无需安装)
- 防盗链:Referer 检查,防止其他网站盗用图片
- AI Agent 集成:Python SDK + Node.js SDK,支持 URL 抓取上传和 Base64 上传
- OpenClaw Skill:让 AI Agent 用自然语言管理图床