Giter Club home page Giter Club logo

vercel-edge-image's Introduction

Vercel Edge Image

使用 Vercel Edge 处理图片, 依赖 Photon,支持缩放、剪裁、水印、滤镜等功能。


Vercel Edge GitHub License GitHub Repo stars

已经适配了 Cloudflare Worker, 见 https://github.com/ccbikai/cloudflare-worker-image

支持特性

  1. 支持 PNG、JPEG、BMP、ICO、TIFF 格式图片处理
  2. 可输出 JPEG、PNG、WEBP 格式图片,默认输出 WEBP 格式图片
  3. 支持管道操作,可以执行多个操作
  4. 支持图片地址白名单,防滥用
  5. 异常降级,如果处理失败返回原图(异常场景不缓存)

部署方式

# 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

演示

缩放+旋转+文字水印

demo

由于 Github 会缓存图片,请前往我博客查看真实示例。

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

致谢


Buy Me A Coffee

vercel-edge-image's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.