Cloudflare Workers 生成占位图服务

Posted on
网络 cloudflare | 共 241 字,阅读约 1 分钟,浏览了

最近做一些小项目遇到了一个小需求,AI 生成图片的时候需要一个占位图,失败的时候也需要一个提示图片。

其实使用纯 js 也能实现,但是搬到线上使用的时候会更方便一点。

https://placeholder.12050231.xyz/?text=占位符文字

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const { searchParams } = new URL(request.url);
  let text = searchParams.get('text') || 'Placeholder';
  let width = searchParams.get('width') || 300;
  let height = searchParams.get('height') || 200;

  // 创建 SVG 图片
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
  <rect width="${width}" height="${height}" style="stroke-width: 3px; stroke: rgba(0,0,0,.1);" fill="#eee"/>
  
      <line xmlns="http://www.w3.org/2000/svg" x1="0" y1="0" x2="${width}" y2="${height}" stroke-width="1" stroke="#ddd" />
      <line xmlns="http://www.w3.org/2000/svg" x1="${width}" y1="0" x2="0" y2="${height}" stroke-width="1" stroke="#ddd" />
    
  
  <text text-anchor="middle" x="50%" y="50%" style="fill:#aaa;font-weight:bold;font-size:100%;font-family:serif,Georgia,Baskerville,Arial,Helvetica,sans-serif;dominant-baseline:central">
  ${text}
  </text>
</svg>`;

  // 返回 SVG 图片作为响应体,设置 Content-Type 为 image/svg+xml
  return new Response(svg, {
    headers: {
      'Content-Type': 'image/svg+xml'
    }
  });
}

使用方式

https://placeholder.12050231.xyz/?text=占位符文字

https://placeholder.12050231.xyz/?text=占位符文字1 https://placeholder.12050231.xyz/?text=占位符文字2&width=500&height=500

📝 评论
评论区加载中,请稍等