最近做一些小项目遇到了一个小需求,AI 生成图片的时候需要一个占位图,失败的时候也需要一个提示图片。
其实使用纯 js 也能实现,但是搬到线上使用的时候会更方便一点。
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=占位符文字