Nodejs进阶:如何将图片转成datauri嵌入到网页中去

简介: 今天,在express/node交流群里,有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。 是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记

问题:将图片转成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

然后在浏览器访问

相关链接

Base64笔记:http://www.ruanyifeng.com/blog/2008/06/base64.html
Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

相关文章
|
Python
Python3,2行代码,多种方法,直接把网页内容转换成PDF文档和图片。
Python3,2行代码,多种方法,直接把网页内容转换成PDF文档和图片。
241 0
|
Java
Java实现图片转化为pdf
Java实现图片转化为pdf
507 0
|
3月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
302 68
|
5月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
57 0
在线将多张图片拼接起来图工具HTML源码
|
8月前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
101 0
在线拼接图片工具HTML源码
|
人工智能 文字识别 JavaScript
一张截图生成iPhone应用、还能转成代码、创建网站,升级后谷歌Bard真成了
一张截图生成iPhone应用、还能转成代码、创建网站,升级后谷歌Bard真成了
145 0
|
前端开发
前端学习案例2-blob对象实现文件的下载和图片预览2
前端学习案例2-blob对象实现文件的下载和图片预览2
133 0
前端学习案例2-blob对象实现文件的下载和图片预览2
|
前端开发
前端学习案例1-blob对象实现文件的下载和图片预览1
前端学习案例1-blob对象实现文件的下载和图片预览1
164 0
前端学习案例1-blob对象实现文件的下载和图片预览1
|
编解码 前端开发 JavaScript
网页转化成pdf,网页转换图片,wkhtmltopdf,wkhtmltoimage使用小结
如果必须是异步接口,让后台调用的时候,在命令行里面加上延时--javascript-delay 10000,默认是200ms,意思命令行访问url的时候,延时10000毫秒生成pdf或者图片,这样也能解决问题,但是请求时间过长。
984 0
网页转化成pdf,网页转换图片,wkhtmltopdf,wkhtmltoimage使用小结
|
Web App开发 JavaScript 前端开发
如何用Javascript将图片的绝对路径转换为base64编码
我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码;
279 0
如何用Javascript将图片的绝对路径转换为base64编码

热门文章

最新文章