前言
在前端开发中，有时我们需要在页面中显示随机的验证码或者占位图片。这个时候，我们可以使用npm包cagen来帮助我们完成这项工作。cagen是一个随机图片生成器，支持生成多种类型的图片，比如占位图片、随机图案、随机背景等等。在这篇文章中，我们将会介绍cagen的基本用法，以及如何在项目中使用它。
安装
安装cagen十分简单，只需要在终端中输入以下命令即可：
npm install cagen --save
然后在项目中导入即可：
const cagen = require('cagen');
使用
cagen支持多种类型的图片生成，这里我们以生成占位图片，即placeholder图片为例，介绍如何使用cagen。
-- -------------------- ---- ------- ----- ----- - ----------------- -- ------------ ------------------------------ -- - ----------------- --- -- ----------------- ------------------- ------ ---- ------- ---- -------- ---------- ------------- -- - ----------------- ---展开代码
使用cagen生成占位图片，只需要调用placeholder方法，然后可以传入一些选项，比如图片的宽高，占位颜色等等。生成的图片会以base64的形式返回。
除了占位图片之外，cagen还支持生成多种类型的图片，比如随机背景、随机图案等等。我们可以通过调用不同的方法来生成不同类型的图片。
示例代码
接下来我们将会结合一个实际的项目，来展示如何在项目中使用cagen。
我们假设有一个图书列表页面，需要在页面中展示每本图书的封面图片。有时，我们可能会因为网络原因导致图片无法正常加载。这个时候，我们可以使用cagen来生成一张占位图片作为替代，这样可以有效改善用户体验。
首先，我们需要在项目中引入cagen：
const cagen = require('cagen');
然后，在我们需要展示图书封面的地方，我们使用img标签来展示图片。对于无法正常加载的情况，我们可以通过给img标签添加onerror事件来处理：
<img src="book1.jpg" alt="Book Cover" onerror="this.onerror=null;this.src='placeholder';">
在onerror事件中，我们给img标签设置了默认图片，即placeholder图片。这里的placeholder图片可以通过调用cagen的placeholder方法生成，默认的配置就可以满足我们的需求，因此我们可以直接调用：
const placeholder = cagen.placeholder();
最后，将生成的placeholder图片设置为img标签的src：
const img = document.querySelector('img'); placeholder.then((base64) => { img.src = base64; });
这样，无论图书图片是否正常加载，我们都可以保证页面上会显示一张占位图片。
总结
cagen是一个十分有用的npm包，可以帮助我们生成各种随机的图片，并且使用也十分简单。在项目中使用cagen可以有效改善用户体验，在图片无法正常加载的情况下，展示一张占位图片也是一个很好的解决方案。希望这篇文章能够帮助读者更好地使用cagen。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/131992
