├── .gitignore ├── .vscode └── settings.json ├── README-zh.md ├── README.md ├── image-converter-next ├── .env.example ├── .eslintrc.json ├── .gitignore ├── .npmrc ├── README-zh.md ├── README.md ├── app │ ├── BaiDuAnalytics.tsx │ ├── GoogleAnalytics.tsx │ ├── actions │ │ └── upload-actions.ts │ ├── api │ │ └── upload │ │ │ └── route.ts │ ├── layout.tsx │ └── page.tsx ├── components.json ├── components │ ├── TailwindIndicator.tsx │ ├── ThemeToggle.tsx │ ├── WebsiteLogo.tsx │ ├── footer │ │ ├── Footer.tsx │ │ ├── FooterLinks.tsx │ │ └── FooterProducts.tsx │ ├── header │ │ ├── Header.tsx │ │ └── HeaderLinks.tsx │ ├── home │ │ ├── FeatureCard.tsx │ │ └── Features.tsx │ ├── icons │ │ ├── expanding-arrow.tsx │ │ ├── eye.tsx │ │ ├── index.tsx │ │ ├── loading-circle.tsx │ │ ├── loading-dots.module.css │ │ ├── loading-dots.tsx │ │ ├── loading-spinner.module.css │ │ ├── loading-spinner.tsx │ │ ├── logo.tsx │ │ ├── moon.tsx │ │ └── sun.tsx │ ├── social-icons │ │ ├── icons.tsx │ │ └── index.tsx │ └── ui │ │ ├── alert.tsx │ │ ├── button.tsx │ │ ├── dropdown-menu.tsx │ │ └── input.tsx ├── config │ └── site.ts ├── gtag.js ├── lib │ ├── s3-client.ts │ └── utils.ts ├── next-env.d.ts ├── next-sitemap.config.js ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── logo.png │ ├── logo.svg │ ├── og.png │ ├── placeholder.svg │ ├── screenshot-1.png │ └── screenshot-2.png ├── styles │ ├── globals.css │ └── loading.css ├── tailwind.config.ts ├── tsconfig.json └── types │ └── siteConfig.ts ├── image-converter-worker ├── package.json ├── pnpm-lock.yaml ├── worker.js └── wrangler.toml ├── screenshot-1.png └── screenshot-2.png /.gitignore: -------------------------------------------------------------------------------- 1 | ### Node template 2 | .idea 3 | .DS_Store 4 | dist 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | .temp 14 | yarn.lock 15 | 16 | # Diagnostic reports (https://nodejs.org/api/report.html) 17 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | *.lcov 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (https://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | jspm_packages/ 50 | 51 | # Snowpack dependency directory (https://snowpack.dev/) 52 | web_modules/ 53 | 54 | # TypeScript cache 55 | *.tsbuildinfo 56 | 57 | # Optional npm cache directory 58 | .npm 59 | 60 | # Optional eslint cache 61 | .eslintcache 62 | 63 | # Microbundle cache 64 | .rpt2_cache/ 65 | .rts2_cache_cjs/ 66 | .rts2_cache_es/ 67 | .rts2_cache_umd/ 68 | 69 | # Optional REPL history 70 | .node_repl_history 71 | 72 | # Output of 'npm pack' 73 | *.tgz 74 | 75 | # Yarn Integrity file 76 | .yarn-integrity 77 | 78 | # dotenv environment variables file 79 | .env 80 | .env.local 81 | .env.test 82 | 83 | # parcel-bundler cache (https://parceljs.org/) 84 | .cache 85 | .parcel-cache 86 | 87 | # Next.js build output 88 | .next 89 | out 90 | 91 | # Nuxt.js build / generate output 92 | .nuxt 93 | dist 94 | 95 | # Gatsby files 96 | .cache/ 97 | # Comment in the assets line in if your project uses Gatsby and not Next.js 98 | # https://nextjs.org/blog/next-9-1#public-directory-support 99 | # assets 100 | 101 | # vuepress build output 102 | .vuepress/dist 103 | 104 | # Serverless directories 105 | .serverless/ 106 | 107 | # FuseBox cache 108 | .fusebox/ 109 | 110 | # DynamoDB Local files 111 | .dynamodb/ 112 | 113 | # TernJS port file 114 | .tern-port 115 | 116 | # Stores VSCode versions used for testing VSCode extensions 117 | .vscode-test 118 | 119 | # yarn v2 120 | .yarn/cache 121 | .yarn/unplugged 122 | .yarn/build-state.yml 123 | .yarn/install-state.gz 124 | .pnp.* 125 | 126 | /.vuepress/dist/ 127 | 128 | # sitemap 129 | */sitemap*.xml 130 | */robots.txt 131 | 132 | # Bun 133 | bun.lockb 134 | .bun 135 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": false, 3 | "editor.formatOnSave": true, 4 | "editor.tabSize": 2, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": "explicit", 7 | "source.organizeImports": "explicit" 8 | }, 9 | "headwind.runOnSave": false, 10 | "typescript.preferences.importModuleSpecifier": "non-relative", 11 | "eslint.validate": ["javascript", "javascriptreact", "typescript"], 12 | "typescript.tsdk": "node_modules/typescript/lib", 13 | "commentTranslate.source": "Bing", 14 | "cSpell.words": [ 15 | "contentlayer", 16 | "lemonsqueezy" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /README-zh.md: -------------------------------------------------------------------------------- 1 | # Image URL Converter 2 | 3 | 这是一个简单的工具，可以将任意图片URL转换为托管在 Cloudflare R2 上的永久链接。适合需要图片托管服务的个人或小型项目使用。 4 | 5 | ## 📦 项目结构 6 | 7 | ``` 8 | /image-url-converter 9 | ├── /image-converter-next # Next.js 前端项目 10 | └── /image-converter-worker # Cloudflare Worker 项目 11 | ``` 12 | 13 | ## 📌 功能特点 14 | 15 | - 简单易用：只需输入原始图片URL，即可获得永久链接 16 | - 全球加速：使用 Cloudflare CDN，访问速度快 17 | - 免费使用：利用 Cloudflare R2 的免费额度 18 | - 每月 10GB 存储空间 19 | - 每月 10GB 出站流量 20 | - 支持自定义域名 21 | - 完全免费部署 22 | 23 | ## 📚 使用指南 24 | 25 | ### 1. 准备工作 26 | 27 | 28 | 1. 注册 [Cloudflare](https://dash.cloudflare.com/sign-up) 账号 29 | 2. 安装 [Node.js](https://nodejs.org/) (版本 18.0.0 或更高) 30 | 3. 安装 [pnpm](https://pnpm.io/) 31 | 32 | ### 2. 配置 Cloudflare R2 33 | 34 | 1. 登录 [Cloudflare 控制台](https://dash.cloudflare.com) 35 | 2. 在左侧菜单找到并点击 "R2" 36 | 3. 如果是首次使用，会提示创建结算账号，按提示完成即可（不会收费） 37 | 4. 点击 "Create bucket" 创建存储桶 38 | - Bucket name 填写：`images`（或你喜欢的名字） 39 | - 点击 "Create bucket" 完成创建 40 | 5. 在存储桶列表中点击刚创建的存储桶 41 | 6. 点击 "Settings" 标签 42 | 7. 找到 "Public access" 部分 43 | - 开启 "Public bucket" 开关 44 | - 如果有自己的域名，可以在下方设置自定义域名（比如：images.your-domain.com） 45 | - 如果没有自己的域名，复制 "Public bucket URL" 备用 46 | 8. 创建 API 令牌 47 | - 点击右上角的 "Manage R2 API Tokens" 48 | - 点击 "Create API token" 49 | - 权限选择：Object Read & Write 50 | - 点击 "Create token" 51 | - 保存显示的信息： 52 | * Access Key ID 53 | * Secret Access Key 54 | 55 | 注意：Secret Access Key 只显示一次，请务必保存！ 56 | 57 | ## 3. 本地使用步骤 58 | 59 | 1. [Fork](https://github.com/weijunext/image-url-converter/fork) 这个项目到你的 GitHub 账号，然后克隆到本地 60 | 61 | 62 | ```bash 63 | git clone [repository-url] 64 | cd image-url-converter 65 | ``` 66 | 67 | ### 2. 配置并运行 Worker 68 | 69 | ```bash 70 | # 进入 Worker 项目目录 71 | cd image-converter-worker 72 | 73 | # 安装依赖 74 | npm install 75 | 76 | # 安装 wrangler 77 | npm install -g wrangler 78 | 79 | # 登录到 Cloudflare 80 | wrangler login 81 | 82 | # 部署 Worker 83 | wrangler deploy 84 | ``` 85 | 86 | ### 3. 配置并运行 Next.js 应用 87 | 88 | ```bash 89 | # 回到项目根目录 90 | cd .. 91 | 92 | # 进入 Next.js 项目目录 93 | cd image-converter-next 94 | 95 | # 安装依赖 96 | npm install 97 | 98 | # 创建环境变量文件 99 | cp .env.example .env.local 100 | ``` 101 | 102 | 编辑 `.env.local` 文件，填入以下信息： 103 | ``` 104 | R2_ACCOUNT_ID=你的Cloudflare账号ID（在Cloudflare主页右侧可以找到） 105 | R2_ACCESS_KEY_ID=你的R2 Access Key ID 106 | R2_SECRET_ACCESS_KEY=你的R2 Secret Access Key 107 | R2_BUCKET_NAME=你的存储桶名称（例如：images） 108 | R2_PUBLIC_URL=你的Public bucket URL 109 | ``` 110 | 111 | ### 4. 运行开发服务器： 112 | ```bash 113 | npm run dev 114 | ``` 115 | 116 | 现在可以访问 http://localhost:3000 使用工具了。 117 | 118 | ## ⚙️ 使用方法 119 | 120 | 1. 确保 Next.js 开发服务器正在运行 121 | 2. 打开浏览器访问 http://localhost:3000 122 | 3. 在输入框中粘贴图片 URL 123 | 4. 点击"转换"按钮 124 | 5. 等待处理完成，获取新的永久链接 125 | 126 | ## ❓ 常见问题 127 | 128 | Q：免费额度够用吗？ 129 | A：对于个人使用来说绰绰有余。每月 10GB 存储和 10GB 流量，可以存储数千张图片。 130 | 131 | Q：上传的图片会过期吗？ 132 | A：不会。只要你的 Cloudflare 账号正常使用，图片就会一直保存。 133 | 134 | Q：上传速度慢怎么办？ 135 | A：图片上传速度主要取决于原始图片所在服务器的响应速度。建议选择稳定的图片源。 136 | 137 | Q：支持哪些图片格式？ 138 | A：支持所有常见的图片格式，包括 JPG、PNG、GIF、WebP 等。 139 | 140 | ## 🔔 注意事项 141 | 142 | 1. 请确保你要转换的图片URL是可以公开访问的 143 | 2. 建议定期检查 R2 的使用量，避免超出免费额度 144 | 3. 请勿上传违规或违法的图片内容 145 | 146 | ## ☎️ 技术支持 147 | 148 | 如果遇到问题： 149 | 1. 可以在 GitHub Issues 中提问 150 | 2. 可以查看 [Cloudflare R2 文档](https://developers.cloudflare.com/r2/) 151 | 3. 可以访问 [Cloudflare 帮助中心](https://support.cloudflare.com/) 152 | 153 | ## 📜 许可证 154 | 155 | MIT License -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image URL Converter 2 | 3 | A simple tool that converts any image URL into a permanent link hosted on Cloudflare R2. Perfect for individuals or small projects needing image hosting services. 4 | 5 | ## 📦 Project Structure 6 | 7 | ``` 8 | /image-url-converter 9 | ├── /image-converter-next # Next.js frontend project 10 | └── /image-converter-worker # Cloudflare Worker project 11 | ``` 12 | 13 | ![screenshot-1](./screenshot-1.png) 14 | 15 | ## 📌 Features 16 | 17 | - Easy to use: Simply input the original image URL to get a permanent link 18 | - Global acceleration: Fast access via Cloudflare CDN 19 | - Free to use: Leverages Cloudflare R2's free tier 20 | - 10GB storage per month 21 | - 10GB egress traffic per month 22 | - Custom domain support 23 | - Free deployment 24 | 25 | ![screenshot-2](./screenshot-2.png) 26 | 27 | ## 📚 Setup Guide 28 | 29 | ### 1. Prerequisites 30 | 31 | 1. Sign up for a [Cloudflare](https://dash.cloudflare.com/sign-up) account 32 | 2. Install [Node.js](https://nodejs.org/) (version 18.0.0 or higher) 33 | 3. Install [pnpm](https://pnpm.io/) 34 | 35 | ### 2. Configure Cloudflare R2 36 | 37 | 1. Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com) 38 | 2. Find and click "R2" in the left sidebar 39 | 3. If it's your first time, you'll be prompted to create a billing account (it's free) 40 | 4. Click "Create bucket" 41 | - Set Bucket name to: `images` (or any name you prefer) 42 | - Click "Create bucket" to finish 43 | 5. Click on your newly created bucket in the bucket list 44 | 6. Go to the "Settings" tab 45 | 7. Find the "Public access" section 46 | - Enable the "Public bucket" toggle 47 | - If you have your own domain, you can set up a custom domain below (e.g., images.your-domain.com) 48 | - If not, copy the "Public bucket URL" for later use 49 | 8. Create an API token 50 | - Click "Manage R2 API Tokens" in the top right 51 | - Click "Create API token" 52 | - Select Object Read & Write permissions 53 | - Click "Create token" 54 | - Save the following information: 55 | * Access Key ID 56 | * Secret Access Key 57 | 58 | Note: The Secret Access Key is shown only once, make sure to save it! 59 | 60 | ### 3. Local Setup 61 | 62 | 1. [Fork](https://github.com/weijunext/image-url-converter/fork) this project to your GitHub account and clone it locally 63 | 64 | ```bash 65 | git clone [repository-url] 66 | cd image-url-converter 67 | ``` 68 | 69 | ### 4. Configure and Run the Worker 70 | 71 | ```bash 72 | # Navigate to the Worker project directory 73 | cd image-converter-worker 74 | 75 | # Install dependencies 76 | npm install 77 | 78 | # Install wrangler 79 | npm install -g wrangler 80 | 81 | # Login to Cloudflare 82 | wrangler login 83 | 84 | # Deploy the Worker 85 | wrangler deploy 86 | ``` 87 | 88 | ### 5. Configure and Run the Next.js App 89 | 90 | ```bash 91 | # Return to project root 92 | cd .. 93 | 94 | # Navigate to Next.js project directory 95 | cd image-converter-next 96 | 97 | # Install dependencies 98 | npm install 99 | 100 | # Create environment variables file 101 | cp .env.example .env.local 102 | ``` 103 | 104 | Edit `.env.local` with your details: 105 | ``` 106 | R2_ACCOUNT_ID=Your Cloudflare Account ID (found on the right side of Cloudflare dashboard) 107 | R2_ACCESS_KEY_ID=Your R2 Access Key ID 108 | R2_SECRET_ACCESS_KEY=Your R2 Secret Access Key 109 | R2_BUCKET_NAME=Your bucket name (e.g., images) 110 | R2_PUBLIC_URL=Your Public bucket URL 111 | ``` 112 | 113 | ### 6. Start the Development Server: 114 | ```bash 115 | npm run dev 116 | ``` 117 | 118 | You can now access the tool at http://localhost:3000 119 | 120 | ## ⚙️ How to Use 121 | 122 | 1. Ensure the Next.js development server is running 123 | 2. Open your browser and visit http://localhost:3000 124 | 3. Paste an image URL into the input field 125 | 4. Click the "Convert" button 126 | 5. Wait for processing to complete and get your new permanent link 127 | 128 | ## ❓ FAQ 129 | 130 | Q: Is the free tier sufficient? 131 | A: It's more than enough for personal use. 10GB storage and 10GB bandwidth monthly can handle thousands of images. 132 | 133 | Q: Do uploaded images expire? 134 | A: No. Images remain stored as long as your Cloudflare account is active. 135 | 136 | Q: What about slow upload speeds? 137 | A: Upload speed primarily depends on the response time of the original image server. Use stable image sources for best results. 138 | 139 | Q: What image formats are supported? 140 | A: All common image formats including JPG, PNG, GIF, WebP, and more. 141 | 142 | ## 🔔 Important Notes 143 | 144 | 1. Ensure the image URLs you want to convert are publicly accessible 145 | 2. Regularly monitor your R2 usage to stay within the free tier limits 146 | 3. Do not upload inappropriate or illegal image content 147 | 148 | ## ☎️ Support 149 | 150 | If you need help: 151 | 1. Create an issue on GitHub 152 | 2. Check the [Cloudflare R2 documentation](https://developers.cloudflare.com/r2/) 153 | 3. Visit the [Cloudflare Help Center](https://support.cloudflare.com/) 154 | 155 | ## 📜 License 156 | 157 | MIT License -------------------------------------------------------------------------------- /image-converter-next/.env.example: -------------------------------------------------------------------------------- 1 | R2_ACCOUNT_ID=Your Cloudflare Account ID (can be found on the right side of Cloudflare dashboard) 2 | R2_ACCESS_KEY_ID=Previously saved Access Key ID 3 | R2_SECRET_ACCESS_KEY=Previously saved Secret Access Key 4 | R2_BUCKET_NAME=Your created bucket name (e.g., images) 5 | R2_PUBLIC_URL=Your Public bucket URL or custom domain URL -------------------------------------------------------------------------------- /image-converter-next/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /image-converter-next/.gitignore: -------------------------------------------------------------------------------- 1 | ### Node template 2 | .idea 3 | .DS_Store 4 | dist 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | .temp 14 | yarn.lock 15 | 16 | # Diagnostic reports (https://nodejs.org/api/report.html) 17 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | *.lcov 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (https://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | jspm_packages/ 50 | 51 | # Snowpack dependency directory (https://snowpack.dev/) 52 | web_modules/ 53 | 54 | # TypeScript cache 55 | *.tsbuildinfo 56 | 57 | # Optional npm cache directory 58 | .npm 59 | 60 | # Optional eslint cache 61 | .eslintcache 62 | 63 | # Microbundle cache 64 | .rpt2_cache/ 65 | .rts2_cache_cjs/ 66 | .rts2_cache_es/ 67 | .rts2_cache_umd/ 68 | 69 | # Optional REPL history 70 | .node_repl_history 71 | 72 | # Output of 'npm pack' 73 | *.tgz 74 | 75 | # Yarn Integrity file 76 | .yarn-integrity 77 | 78 | # dotenv environment variables file 79 | .env 80 | .env.local 81 | .env.test 82 | 83 | # parcel-bundler cache (https://parceljs.org/) 84 | .cache 85 | .parcel-cache 86 | 87 | # Next.js build output 88 | .next 89 | out 90 | 91 | # Nuxt.js build / generate output 92 | .nuxt 93 | dist 94 | 95 | # Gatsby files 96 | .cache/ 97 | # Comment in the assets line in if your project uses Gatsby and not Next.js 98 | # https://nextjs.org/blog/next-9-1#public-directory-support 99 | # assets 100 | 101 | # vuepress build output 102 | .vuepress/dist 103 | 104 | # Serverless directories 105 | .serverless/ 106 | 107 | # FuseBox cache 108 | .fusebox/ 109 | 110 | # DynamoDB Local files 111 | .dynamodb/ 112 | 113 | # TernJS port file 114 | .tern-port 115 | 116 | # Stores VSCode versions used for testing VSCode extensions 117 | .vscode-test 118 | 119 | # yarn v2 120 | .yarn/cache 121 | .yarn/unplugged 122 | .yarn/build-state.yml 123 | .yarn/install-state.gz 124 | .pnp.* 125 | 126 | /.vuepress/dist/ 127 | 128 | # sitemap 129 | */sitemap*.xml 130 | */robots.txt -------------------------------------------------------------------------------- /image-converter-next/.npmrc: -------------------------------------------------------------------------------- 1 | # if use pnpm 2 | enable-pre-post-scripts=true 3 | public-hoist-pattern[]=*@nextui-org/* 4 | registry=https://registry.npmmirror.com/ 5 | -------------------------------------------------------------------------------- /image-converter-next/README-zh.md: -------------------------------------------------------------------------------- 1 | # Image URL Converter 2 | 3 | 这是一个简单的工具，可以将任意图片URL转换为托管在 Cloudflare R2 上的永久链接。适合需要图片托管服务的个人或小型项目使用。 4 | 5 | ## 项目结构 6 | 7 | ``` 8 | /image-url-converter 9 | ├── /image-converter-next # Next.js 前端项目 10 | └── /image-converter-worker # Cloudflare Worker 项目 11 | ``` 12 | 13 | ## 功能特点 14 | 15 | - 简单易用：只需输入原始图片URL，即可获得永久链接 16 | - 全球加速：使用 Cloudflare CDN，访问速度快 17 | - 免费使用：利用 Cloudflare R2 的免费额度 18 | - 每月 10GB 存储空间 19 | - 每月 10GB 出站流量 20 | - 支持自定义域名 21 | - 完全免费部署 22 | 23 | ## 使用步骤 24 | 25 | ### 1. 准备工作 26 | 27 | 28 | 1. 注册 [Cloudflare](https://dash.cloudflare.com/sign-up) 账号 29 | 2. 安装 [Node.js](https://nodejs.org/) (版本 18.0.0 或更高) 30 | 3. 安装 [pnpm](https://pnpm.io/) 31 | 32 | ### 2. 配置 Cloudflare R2 33 | 34 | 1. 登录 [Cloudflare 控制台](https://dash.cloudflare.com) 35 | 2. 在左侧菜单找到并点击 "R2" 36 | 3. 如果是首次使用，会提示创建结算账号，按提示完成即可（不会收费） 37 | 4. 点击 "Create bucket" 创建存储桶 38 | - Bucket name 填写：`images`（或你喜欢的名字） 39 | - 点击 "Create bucket" 完成创建 40 | 5. 在存储桶列表中点击刚创建的存储桶 41 | 6. 点击 "Settings" 标签 42 | 7. 找到 "Public access" 部分 43 | - 开启 "Public bucket" 开关 44 | - 如果有自己的域名，可以在下方设置自定义域名（比如：images.your-domain.com） 45 | - 如果没有自己的域名，复制 "Public bucket URL" 备用 46 | 8. 创建 API 令牌 47 | - 点击右上角的 "Manage R2 API Tokens" 48 | - 点击 "Create API token" 49 | - 权限选择：Object Read & Write 50 | - 点击 "Create token" 51 | - 保存显示的信息： 52 | * Access Key ID 53 | * Secret Access Key 54 | 55 | 注意：Secret Access Key 只显示一次，请务必保存！ 56 | 57 | ## 3. 本地使用步骤 58 | 59 | 1. [Fork](https://github.com/weijunext/image-url-converter/fork) 这个项目到你的 GitHub 账号，然后克隆到本地 60 | 61 | 62 | ```bash 63 | git clone [repository-url] 64 | cd image-url-converter 65 | ``` 66 | 67 | ### 2. 配置并运行 Worker 68 | 69 | ```bash 70 | # 进入 Worker 项目目录 71 | cd image-converter-worker 72 | 73 | # 安装依赖 74 | npm install 75 | 76 | # 安装 wrangler 77 | npm install -g wrangler 78 | 79 | # 登录到 Cloudflare 80 | wrangler login 81 | 82 | # 部署 Worker 83 | wrangler deploy 84 | ``` 85 | 86 | ### 3. 配置并运行 Next.js 应用 87 | 88 | ```bash 89 | # 回到项目根目录 90 | cd .. 91 | 92 | # 进入 Next.js 项目目录 93 | cd image-converter-next 94 | 95 | # 安装依赖 96 | npm install 97 | 98 | # 创建环境变量文件 99 | cp .env.example .env.local 100 | ``` 101 | 102 | 编辑 `.env.local` 文件，填入以下信息： 103 | ``` 104 | R2_ACCOUNT_ID=你的Cloudflare账号ID（在Cloudflare主页右侧可以找到） 105 | R2_ACCESS_KEY_ID=你的R2 Access Key ID 106 | R2_SECRET_ACCESS_KEY=你的R2 Secret Access Key 107 | R2_BUCKET_NAME=你的存储桶名称（例如：images） 108 | R2_PUBLIC_URL=你的Public bucket URL 109 | ``` 110 | 111 | ### 4. 运行开发服务器： 112 | ```bash 113 | npm run dev 114 | ``` 115 | 116 | 现在可以访问 http://localhost:3000 使用工具了。 117 | 118 | ## 使用方法 119 | 120 | 1. 确保 Next.js 开发服务器正在运行 121 | 2. 打开浏览器访问 http://localhost:3000 122 | 3. 在输入框中粘贴图片 URL 123 | 4. 点击"转换"按钮 124 | 5. 等待处理完成，获取新的永久链接 125 | 126 | ## 常见问题 127 | 128 | Q：免费额度够用吗？ 129 | A：对于个人使用来说绰绰有余。每月 10GB 存储和 10GB 流量，可以存储数千张图片。 130 | 131 | Q：上传的图片会过期吗？ 132 | A：不会。只要你的 Cloudflare 账号正常使用，图片就会一直保存。 133 | 134 | Q：上传速度慢怎么办？ 135 | A：图片上传速度主要取决于原始图片所在服务器的响应速度。建议选择稳定的图片源。 136 | 137 | Q：支持哪些图片格式？ 138 | A：支持所有常见的图片格式，包括 JPG、PNG、GIF、WebP 等。 139 | 140 | ## 注意事项 141 | 142 | 1. 请确保你要转换的图片URL是可以公开访问的 143 | 2. 建议定期检查 R2 的使用量，避免超出免费额度 144 | 3. 请勿上传违规或违法的图片内容 145 | 146 | ## 技术支持 147 | 148 | 如果遇到问题： 149 | 1. 可以在 GitHub Issues 中提问 150 | 2. 可以查看 [Cloudflare R2 文档](https://developers.cloudflare.com/r2/) 151 | 3. 可以访问 [Cloudflare 帮助中心](https://support.cloudflare.com/) 152 | 153 | ## 许可证 154 | 155 | MIT License -------------------------------------------------------------------------------- /image-converter-next/README.md: -------------------------------------------------------------------------------- 1 | # Image URL Converter 2 | 3 | A simple tool that converts any image URL into a permanent link hosted on Cloudflare R2. Perfect for individuals or small projects needing image hosting services. 4 | 5 | ## Project Structure 6 | 7 | ``` 8 | /image-url-converter 9 | ├── /image-converter-next # Next.js frontend project 10 | └── /image-converter-worker # Cloudflare Worker project 11 | ``` 12 | 13 | ## Features 14 | 15 | - Easy to use: Simply input the original image URL to get a permanent link 16 | - Global acceleration: Fast access via Cloudflare CDN 17 | - Free to use: Leverages Cloudflare R2's free tier 18 | - 10GB storage per month 19 | - 10GB egress traffic per month 20 | - Custom domain support 21 | - Free deployment 22 | 23 | ## Setup Guide 24 | 25 | ### 1. Prerequisites 26 | 27 | 1. Sign up for a [Cloudflare](https://dash.cloudflare.com/sign-up) account 28 | 2. Install [Node.js](https://nodejs.org/) (version 18.0.0 or higher) 29 | 3. Install [pnpm](https://pnpm.io/) 30 | 31 | ### 2. Configure Cloudflare R2 32 | 33 | 1. Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com) 34 | 2. Find and click "R2" in the left sidebar 35 | 3. If it's your first time, you'll be prompted to create a billing account (it's free) 36 | 4. Click "Create bucket" 37 | - Set Bucket name to: `images` (or any name you prefer) 38 | - Click "Create bucket" to finish 39 | 5. Click on your newly created bucket in the bucket list 40 | 6. Go to the "Settings" tab 41 | 7. Find the "Public access" section 42 | - Enable the "Public bucket" toggle 43 | - If you have your own domain, you can set up a custom domain below (e.g., images.your-domain.com) 44 | - If not, copy the "Public bucket URL" for later use 45 | 8. Create an API token 46 | - Click "Manage R2 API Tokens" in the top right 47 | - Click "Create API token" 48 | - Select Object Read & Write permissions 49 | - Click "Create token" 50 | - Save the following information: 51 | * Access Key ID 52 | * Secret Access Key 53 | 54 | Note: The Secret Access Key is shown only once, make sure to save it! 55 | 56 | ### 3. Local Setup 57 | 58 | 1. [Fork](https://github.com/weijunext/image-url-converter/fork) this project to your GitHub account and clone it locally 59 | 60 | ```bash 61 | git clone [repository-url] 62 | cd image-url-converter 63 | ``` 64 | 65 | ### 4. Configure and Run the Worker 66 | 67 | ```bash 68 | # Navigate to the Worker project directory 69 | cd image-converter-worker 70 | 71 | # Install dependencies 72 | npm install 73 | 74 | # Install wrangler 75 | npm install -g wrangler 76 | 77 | # Login to Cloudflare 78 | wrangler login 79 | 80 | # Deploy the Worker 81 | wrangler deploy 82 | ``` 83 | 84 | ### 5. Configure and Run the Next.js App 85 | 86 | ```bash 87 | # Return to project root 88 | cd .. 89 | 90 | # Navigate to Next.js project directory 91 | cd image-converter-next 92 | 93 | # Install dependencies 94 | npm install 95 | 96 | # Create environment variables file 97 | cp .env.example .env.local 98 | ``` 99 | 100 | Edit `.env.local` with your details: 101 | ``` 102 | R2_ACCOUNT_ID=Your Cloudflare Account ID (found on the right side of Cloudflare dashboard) 103 | R2_ACCESS_KEY_ID=Your R2 Access Key ID 104 | R2_SECRET_ACCESS_KEY=Your R2 Secret Access Key 105 | R2_BUCKET_NAME=Your bucket name (e.g., images) 106 | R2_PUBLIC_URL=Your Public bucket URL 107 | ``` 108 | 109 | ### 6. Start the Development Server: 110 | ```bash 111 | npm run dev 112 | ``` 113 | 114 | You can now access the tool at http://localhost:3000 115 | 116 | ## How to Use 117 | 118 | 1. Ensure the Next.js development server is running 119 | 2. Open your browser and visit http://localhost:3000 120 | 3. Paste an image URL into the input field 121 | 4. Click the "Convert" button 122 | 5. Wait for processing to complete and get your new permanent link 123 | 124 | ## FAQ 125 | 126 | Q: Is the free tier sufficient? 127 | A: It's more than enough for personal use. 10GB storage and 10GB bandwidth monthly can handle thousands of images. 128 | 129 | Q: Do uploaded images expire? 130 | A: No. Images remain stored as long as your Cloudflare account is active. 131 | 132 | Q: What about slow upload speeds? 133 | A: Upload speed primarily depends on the response time of the original image server. Use stable image sources for best results. 134 | 135 | Q: What image formats are supported? 136 | A: All common image formats including JPG, PNG, GIF, WebP, and more. 137 | 138 | ## Important Notes 139 | 140 | 1. Ensure the image URLs you want to convert are publicly accessible 141 | 2. Regularly monitor your R2 usage to stay within the free tier limits 142 | 3. Do not upload inappropriate or illegal image content 143 | 144 | ## Support 145 | 146 | If you need help: 147 | 1. Create an issue on GitHub 148 | 2. Check the [Cloudflare R2 documentation](https://developers.cloudflare.com/r2/) 149 | 3. Visit the [Cloudflare Help Center](https://support.cloudflare.com/) 150 | 151 | ## License 152 | 153 | MIT License -------------------------------------------------------------------------------- /image-converter-next/app/BaiDuAnalytics.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Script from "next/script"; 4 | 5 | const BaiDuAnalytics = () => { 6 | return ( 7 | <> 8 | {process.env.NEXT_PUBLIC_BAIDU_TONGJI ? ( 9 | <> 10 |