Nodejs进阶:如何将图片转成datauri嵌入到网页中去
2016-11-15 20:11
274 查看
问题:将图片转成datauri
今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记录一下。
实现思路
思路很直观:1、读取图片二进制数据 -> 2、转成base64字符串 -> 3、转成datauri。关于base64的介绍,可以参考阮一峰老师的文章。而 datauri 的格式如下
data:[][;base64],
具体到png图片,大概如下,其中 “xxx” 就是前面的base64字符串了。接下来,我们看下在nodejs里该如何实现
data: image/png;base64, xxx
具体实现
首先,读取本地图片二进制数据。var fs = require('fs'); var filepath = './1.png'; var bData = fs.readFileSync(filepath);
然后,将二进制数据转换成base64编码的字符串。
var base64Str = bData.toString('base64');
最后,转换成datauri的格式。
var datauri = 'data:image/png;base64,' + base64Str;
完整例子代码如下,代码非常少:
var fs = require('fs'); var filepath = './1.png'; var bData = fs.readFileSync(filepath);
var base64Str = bData.toString('base64');
var datauri = 'data:image/png;base64,' + base64Str;
console.log(datauri);
github demo地址
demo地址请点击这里,或者git clone https://github.com/chyingp/nodejs-learning-guide.git cd nodejs-learning-guide/examples/2016.11.15-base64-datauri node server.js
然后在浏览器访问 http://127.0.0.1:3000,就可以看到效果 :)
相关链接
Base64笔记:http://www.ruanyifeng.com/blog/2008/06/base64.htmlData URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
相关文章推荐
- Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
- Nodejs进阶:如何将图片转成datauri嵌入到网页中去
- 手把手教你如何将图片“嵌入”网页中
- [置顶] 如何将本地图片嵌入网页?
- 用CSS如何控制网页中图片自适应大小
- 所有网页背景图放入一张图片,如何调用
- 给初学者:VB如何操作WEB页的浏览提交———八:获取网页上的链接、图片指向地址
- 如何在窗体编程和网页编程中按图片比例显示缩放后的图片(.net 2005)
- 如何在网页中嵌入Media player 播放流媒体文件
- 如何实现在网页里嵌入wrl文件
- 如何根据字符串获取嵌入到程序中的图片等资源
- 如何使自己的网页不会被别人盗用(避免别人讲自己的网页嵌入到frame中)
- 网页设计[显示站点信息的导航及如何用CSS来控制图片大小]
- 如何遍历网页内图片
- 如何:在网页中嵌入Silverlight视频
- 如何利用asp保存远程网页中的图片到本地来!
- ASP.NET 2.0 - 如何于网页上新增包括图片在内的数据至数据库
- 如何在网页中嵌入流媒体文件
- 如何提高网页中图片显示的用户体验(附源码下载)
- 如何“保存网页中所有图片”