对于网页来说,一个图片的存储形式有很多种了。其中一种就是图片的内容以base64编码的形式存在于html之中,而不是以更加常见的图片单独存放的形式,存放于网络之中。苏南大叔在本文中,讲述的就是,node如何把一个图片转化为base64的方式,进而使其能够存在于css或者html之中。大家如果不是太明白的话,可以查看图片的src属性,正常来说是以http开头的,而不是data:开头的。

node 如何把图片文件转换为 base64 形式? - img_base64_hero
node 如何把图片文件转换为 base64 形式?(图2-1)

本文编译环境为:node 8.11.3npm 5.6.0 mime-types 2.1.21

安装mime-types

这个mime-types主要是用于检测图片的类型的,安装方式如下:

npm install mime-types --save

node 如何把图片文件转换为 base64 形式? - img_base64
node 如何把图片文件转换为 base64 形式?(图2-2)

base64转换的相关代码demo

用到了fspathmime-types三个模块,其中,fspath是系统自带的模块,mime-types需要额外安装。

const fs = require('fs');
const path = require('path');
const mineType = require('mime-types');

var base64img = function(file){
  let filePath = path.resolve(file);
  let data = fs.readFileSync( path.resolve(filePath));
  data = new Buffer(data).toString('base64');
  return 'data:' + mineType.lookup(filePath) + ';base64,' + data;
}
var img01= base64img("img/001.png");

letvarconst虽然使用上有区别,但是大多数时候,混用也是没有问题的。大家刻意区分的话,可以自行修改代码。
返回值就类似以下字符串开头的很长的字符串,可以用于替代图片文件的网络地址。

data:image/png;base64,

使用方式

使用方式上就是类似:

<img src='data:image/png;base64,       '/>

对于苏南大叔来说,这个技术点用于替换emailhtml正文中的图片。把传统的http图片转换为base64就可以随着邮件正文一起发送了。

总结

更多node相关经验文章,请支持苏南大叔的博客。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   node    base64

本站的忠实读者小伙伴,正在阅读下面这些文章: