在前端开发中,在将图片文件嵌入到 HTML 或 JS 中时,常常需要将其转换为 base64 格式。这种转换通常需要使用在线转换工具,但是这会让开发过程变得繁琐和不可靠。不过,有一个名为 image-to-js 的 npm 包,可以通过命令行将图片转换为 base64 并嵌入到 JavaScript 代码中,使得开发更加高效和方便。
安装
可以通过以下命令进行安装:
npm install -g image-to-js
使用
首先,需要将要转换的图片文件放入到一个文件夹中。例如:
images/ ├── icon.png └── logo.png
然后,使用以下命令将文件夹中所有图片文件转换为 base64 并嵌入到指定的 JavaScript 文件中:
image-to-js images/ --output images.js
上述命令将会生成一个名为 images.js 的文件,包含以下代码:
module.exports = { "icon.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAplJREFUWAnVlF1oVEUUhr/7jK3N+uZ7kslS2SssVYJLQ/xqnLSGyUWEj6UJiP8IXm0aioNEEgciJLhjYWFgiBMQgIiKBkIWaKGRamk6h+hUK6n05ovd+dd7HNGjKfz/XhfOX9pjEVDta11R4c4AOvwkKjz3u+7d/PZi/huCSFdK8Fq9cE/Ujxk2N+lm1W8b1PEiOZdRt22C/kaZ/8p0kK56Dy5utF465FKha+Ny0m2K71ync1ZwRFhaKDzIYvc8MszHivJf6Bn9kzcFyDtAuwiJKAeHOThYQf14GKmpZ6UwGvZhCfkTuq3D+1YGHD7fTbjRFeuY7z8E4+u4LLup4Rzen29DjLmvt9gp9O51AO0J+12ClTRWYq8BtfM/vJm2gLHv1kW+2N9aP5Fu5N+KjN5/5+5DgJ5eO1HyfWEKjIe8QX9n70yBBxH5K5Di5GF5Mi33hb5JZg5UpRv30RYKMu8KOXpdA9ViBn20vPMz833pgW8KdBfzESnZw98okosC/p7G3qX9uF7Vx2R0vxKYbY8mMc4uGi7Lm4p99ebN6iCVgvK9Ui/6enYO1zNf1XMlN2N/CLL6/ZwUuMc00xnor3icVbwjlX9Sd7VgRIR34SNs7YiB4z4c7dbLNbf6SXaUphWyezsX9CNi6H1U6vQbjYVvrLrrDwU6V1jvO2yy0B0TXo9xOy11Dz5p5dl5NfMilcyD1H5IexstevDA8ljJW9Oty9rC7y0luvVs8LcW1tggE2tYCZpvTxRvTd8WJyuk9tyrJrWTn0JMv3iuWYtGdTkZQnDsSBkHH/R2QWysIy9Xc+NHZZCO5B5h5W5hmHreeIjuUBMCoSwgmx6cjPNTbN9IoPXc1yNf1O6+2KeY/gmpDdUdpZ6m0ONv3qVkg327u9xDdUsm0sVSsRgRLY7WMuXdLU4wJZWT8W/NJAHaok+HrVPpxpAAAAAElFTkSuQmCC", "logo.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAk1JREFUWAnVlF2IVFUUhr+UrdZ6UmpRs6hoqRG3clu0vmtJJQyLAe9GRCNAWcR/YsLIoTeHI4IKBZWLVZYqOqDqg0AY0S2Ogou9Oce/czc/hl19z93o7fc4zOzlmU/fPpM6HCdJH/jSoScXbfe0Y2Fkv6MYwC6uCxDi6drnG2QMVzsn1xRB/Wke03009XldLEjgzm5zFKhHlZ1rxPS15D8+nxB786RJvLvcdMocGpEXXdu8+y3WgrrvLTGpp+QJt+r/m2KBOaNf1Hmm+rnCGxJXvcC9IYKj5Md5pZnw5zZW/b0mzmF8/BOIjK11yaydXOzRHqW8GvZzN2BIlztBfwbhz7GKLqIQbQEJQVywabX9uF7Vx2R0vxKY/ng4w4XiE/i4HnB8qw99NFp6NGgKdi9SIeYlhiyezvfDZLlrwUcnD+UJ0hB99KNpHz88mLjEDXm0/zYUfCV6eDZ6UwGUMUmpVq3FbPqluV2fT9DWPrNth1O8sJmatNY4GE4wE4pVo+eKB8tzftRjA7dTipjnXpRuWYt+nfzG3fQ+CwjiLiMfeLj04YSvHtmAodlJx9XlCnFiMWKv5/k5xbJwkdDdUdpZ6m0ONv3qVkg327u9xCBVS2g0BkLj5mXCc5zvSu5Ly/wyOaX/CPULRvcpxtOvew1eNk1CfN2Y92swGvZzN2BDx1T9Tf7VjAqhv3XE7LXLwDdCu4SlraYZsAAAAASUVORK5CYII=" };
最后,在应用中引入生成的 JavaScript 文件并通过以下方式获取 base64 数据:
const images = require('./images'); const iconBase64 = images['icon.png'];
意义
使用 image-to-js 可以让我们在前端开发中更加高效和方便地将图片嵌入到 HTML 或 JS 中,而无需依赖在线转换网站。同时,通过在 JavaScript 中嵌入 base64 数据,还可以减少前端应用中的请求次数和图片加载时间,从而提高应用的性能表现。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/70619