占位图片(Placeholder Image) 是前端开发中常用的工具,用于在网页加载慢或未加载完整的情况下,为图像元素提供占位。但是,有时候我们需要更灵活的方式来生成自定义占位图片以满足特定需求。在这篇博客中,我们将介绍如何使用 Next.js
和 sharp
框架来实现一个占位图片生成工具,使你能够根据需要生成自定义占位图片。
占位图片生成工具是一个用于动态生成占位图片的应用程序,其作用如下:
作用:
以下是基于 Next.js
框架和 sharp
图片处理库实现的占位图片生成工具的示例代码。你可以在本地运行这个示例,以便更好地理解如何实现占位图片生成工具。
首先,让我们创建一个Next.js项目,以便开始构建我们的占位图片生成工具。使用以下命令初始化一个新项目:
npx create-next-app placeholder-image-generator
cd placeholder-image-generator
在Next.js中,我们可以使用API路由来创建服务器端端点。我们将创建一个API路由,它将处理占位图片的生成请求。在项目根目录下创建一个名为 pages/api/g/[...px].js
的文件,这将是我们的生成工具的入口点。
// pages/api/g/[...px].js
import sharp from 'sharp'
const colorString = require('color-string')
export default async function handler(req, res) {
try {
// 解析请求参数
let { px, text, bg, color, size, type } = req.query;
// 处理参数并设置默认值
let [w, h] = px?.length >= 2 ? px : [200, 200];
text = text || `${w} x ${h}`;
bg = bg || 'ccc';
color = color || '666';
size = size || 32;
// 处理颜色参数
const bgRes = colorString.get(bg) || colorString.get(`#${bg}`);
let bgStr = bgRes ? colorString.to.hex(bgRes.value) : '#ccc';
const colorRes = colorString.get(color) || colorString.get(`#${color}`);
let colorStr = colorRes ? colorString.to.hex(colorRes.value) : '#666';
// 生成SVG图像
let ratio = 1;
let buffer = getSvgBuffer({
w: ratio * w,
h: ratio * h,
bg: bgStr,
color: colorStr,
size,
text,
});
// 根据类型响应不同格式的图像
if (type === 'svg') {
res.status(200).setHeader('Content-Type', 'image/svg+xml');
res.end(buffer);
} else {
const img = await sharp(buffer, {
density: 1000,
})
.withMetadata({
density: 1000,
quality: 100,
})
.png({
palette: true,
quality: 100,
compressionLevel: 3,
})
.resize({
width: +w,
height: +h,
fit: 'contain',
})
.toBuffer();
res.status(200).setHeader('Content-Type', 'image/png');
res.end(img);
}
} catch (e) {
res.status(200).setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(getErrorHtml());
}
}
我们在上述代码中使用了名为 getSvgBuffer
的函数来生成SVG图像。这个函数接受参数,包括宽度、高度、背景颜色、文字颜色、文字内容和文字大小。
function getSvgBuffer({ w, h, bg, color, size, text }) {
let textY = (+h + size / 2) / 2;
let svg = `" height="${h}">
${w} " height="${h}"
fill="${bg}" style="fill:${bg};"/>
${textY} "
dominant-baseline="alphabetic" text-anchor="middle"
fill="none" stroke="${color}" font-size="${size}"
style="font-family:Verdana, Arial, lobster, Helvetica,fantasy,fangsong,monospace,emoji,'Gill Sans',system-ui,serif,Georgia,Times,'Times New Roman','黑体','STXingkai';"
fill-opacity="1">${text}
`;
return Buffer.from(svg);
}
在上述代码中,我们使用 getErrorHtml
函数来生成包含错误信息的HTML页面。这是一个简单的HTML模板,用于在发生错误时向用户提供错误信息。
function getErrorHtml() {
let basePath = process.env.BASE_PATH
let publicPath = `${basePath}/api/g`
let backHome =
process.env.NODE_ENV === 'development'
? `← 返回首页`
: ''
return `
${basePath}/favicon.ico">
自定义占位图
URL 地址异常
${backHome}
URL格式参考如下:
-
默认:${publicPath}/200/200">${publicPath}/200/200
${publicPath}/200/200" alt="tiven-img">
-
Svg占位图:${publicPath}/200/100?type=svg&bg=FEDC9B">${publicPath}/200/100?type=svg&bg=FEDC9B
${publicPath}/200/100?type=svg&bg=FEDC9B" alt="tiven-img">
-
自定义大小:${publicPath}/640/320">${publicPath}/640/320
${publicPath}/640/320" alt="tiven-img">
-
自定义内容:${publicPath}/400/200?bg=palevioletred&color=purple&text=React&size=30">${publicPath}/400/200?bg=palevioletred&color=purple&text=React&size=30
${publicPath}/400/200?bg=palevioletred&color=purple&text=React&size=30" alt="tiven-img">
参数(可选)
作用
bg
背景色,默认:#ccc
color
文字颜色,默认:#666
text
文字,默认:200x200
( width x height )
size
文字大小,默认:32
type
占位图类型,默认:png
,可选 svg
bg,color 颜色参数可以传 hex类型 的值:50A6EE
,f00
;
也可以传表示颜色的 英文单词 :red
、pink
、red
等。
完整技术实现博客:Next.js和sharp实现占位图片生成工具
`
}
现在,你可以启动你的 Next.js 应用程序并测试占位图片生成工具。运行以下命令:
npm run dev
然后,在浏览器中访问 http://localhost:3000/api/g/400/200 ,并尝试不同的参数组合,以生成自定义的占位图片。
在这篇博客中,我们深入探讨了如何使用 Next.js
框架和 sharp
图片处理库创建一个占位图片生成工具。这个工具允许你根据用户的参数生成自定义占位图片,非常适合前端开发中的图像占位需求。通过这个示例,你可以学习如何设置API路由、处理请求参数、生成SVG图像和处理错误情况。这将使你在前端开发中更加灵活,满足不同项目的需求。无论是网站开发、移动应用开发还是设计师和开发者之间的协作,占位图片生成工具都可以提高工作效率,改善用户体验。
欢迎访问:天问博客