时间:2021-05-26
问题:将图片转成datauri
今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。
是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记录一下。
实现思路
思路很直观:1、读取图片二进制数据 -> 2、转成base64字符串 -> 3、转成datauri。
关于base64的介绍,可以参考阮一峰老师的文章。而 datauri 的格式如下
具体到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);demo地址
demo地址请点击这里
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
迅捷CAD编辑器如何将CAD图转成图片?很多新手网友们,还不太了解迅捷CAD编辑器将CAD图转成图片的方法,本文主要介绍关于迅捷CAD编辑器将CAD图转成图片的
剪映如何将字幕转成语音,不少人不知道怎么将字幕转成语音,接下来用图解的形式介绍给大家剪映如何将字幕转成语音,感兴趣的朋友不要错过了。软件名称:剪映(视频编辑软件
PHP中如何将ip地址转成十进制数呢?现在PHP中有很多时候都会用到ip地址,但是这个ip地址获取的时候都不是10进制的。那么PHP中如何将ip地址转成十进制数
【怎么制作网站页面】如何将网站的网页设计成wap网站?dreamweaver如何制作简单的网页?下面就和小编一起来看看吧! 如何将网站的网页设计成wap网
字符画是一种由字母、标点或其他字符组成的图画,它产生于互联网时代,在聊天软件中使用较多,本文我们看一下如何将自己喜欢的图片转成字符画。静态图片首先,我们来演示将