简介
whirr 是一个基于 npm 包管理器的前端工具，用于快速生成 HTML 页面中图片的占位图和响应式图片。
它支持自定义图片尺寸、颜色和背景，并提供了多个占位图和响应式图片的展示方式，可以与现有的代码库无缝对接，为前端开发者带来极大的便利。
本文将详细介绍 whirr 的使用方法，包括安装、调用方式、配置参数等方面，同时提供几个实用的示例代码，供读者参考。
安装
首先，需要安装 NodeJS 和 npm 包管理器。安装方法可以去官网查看。
然后，在命令行中输入以下代码：
$ npm install whirr --save
调用方式
安装完 whirr 后，在需要使用它的 HTML 页面中引入相应的脚本，例如：
<script src="path/to/whirr.min.js"></script>
或者在 NodeJS 环境中直接调用：
var whirr = require('whirr');参数说明
whirr 提供了多个参数配置选项，可以根据实际需求进行调整。以下是各个参数的说明：
size：图片尺寸，默认为300x300bg：背景颜色，默认为#dddfg：前景颜色，默认为#aaatext：图片文字内容，默认为whirrfont：图片文字字体，默认为20px Arialmode：图片展示模式，分为cover、contain、fill、inside、outside，默认为coverformat：图片格式，分为jpeg、png、webp，默认为jpegquality：图片质量，取值范围为0到100，默认为70ratio：图片宽高比，默认为1:1，可以设置为任意比例scale：图片缩放方式，分为none、upscale、downscale、force四种方式，默认为none
使用示例
生成占位图
在 HTML 页面中插入以下代码即可生成一张默认尺寸、默认颜色的占位图：
<img src="data:image/jpeg;base64, {{ whirr({}) }}" alt="placeholder image"/>可以调整尺寸、颜色等参数，例如：
<img src="data:image/jpeg;base64, {{ whirr({size: '600x400', bg: '#333', fg: '#fff'}) }}" alt="placeholder image"/>生成响应式图片
在 HTML 页面中插入以下代码即可生成一张默认尺寸、默认颜色的响应式图片：
<img srcset="data:image/jpeg;base64, {{ whirr({ratio: '16:9'}) }} 1600w,
data:image/jpeg;base64, {{ whirr({ratio: '16:9'}) }} 1200w,
data:image/jpeg;base64, {{ whirr({ratio: '16:9'}) }} 800w,
data:image/jpeg;base64, {{ whirr({ratio: '16:9'}) }}" alt="placeholder image"/>可以调整尺寸、颜色等参数，例如：
<img srcset="data:image/jpeg;base64, {{ whirr({size: '800x600', bg: '#f00', fg: '#fff', ratio: '16:9'}) }} 1600w,
data:image/jpeg;base64, {{ whirr({size: '800x600', bg: '#f00', fg: '#fff', ratio: '16:9'}) }} 1200w,
data:image/jpeg;base64, {{ whirr({size: '800x600', bg: '#f00', fg: '#fff', ratio: '16:9'}) }} 800w,
data:image/jpeg;base64, {{ whirr({size: '800x600', bg: '#f00', fg: '#fff', ratio: '16:9'}) }}" alt="placeholder image"/>结语
本文介绍了 npm 包 whirr 的使用方法和参数配置，以及几个实用的示例代码，希望对前端开发者有所帮助。
在实际项目中，whirr 可以帮助我们快速生成占位图和响应式图片，减少开发时间和成本，同时也可以提高页面的美观度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a29