Vercel Edge Image

Vercel Edge , Photon

Cloudflare Worker, https://github.com/ccbikai/cloudflare-worker-image

1. PNGJPEGBMPICOTIFF
2. JPEGPNGWEBP WEBP

# patch  pnpm,  pnpm,  patch-package https://www.npmjs.com/package/patch-package
npm i -g pnpm

# 
git clone https://github.com/ccbikai/vercel-edge-image.git
cd vercel-edge-image

# 
pnpm install

# 
mv .env.example .env
vi .env # WHITE_LIST

# 
npm run deploy

, https://edge-image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fshare%2FMTyerw%2Fbanner-2048.jpeg&action=resize!830,400,2

url:

encodeURIComponent

action:

, Photon ! resize!830,400,2

| resize!830,400,2|watermark!https%3A%2F%2Fstatic.miantiao.me%2Fshare%2F6qIq4w%2FFhSUzU.png,10,10

URL encodeURIComponent URL

format:

jpg,webp,png webp

quality:

1-100 webp jpg 99

++

Github

http://chi.miantiao.me/post/vercel-edge-image/

• Cloudflare
• photon
• wasm-image-optimization