Cloudflare Workers 生成占位图服务

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'
    }
  });
}