首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >base64图片转码

base64图片转码

作者头像
余生
发布2018-10-15 15:41:48
3.3K0
发布2018-10-15 15:41:48
举报
文章被收录于专栏:余生开发余生开发

怎么把图转成base64?

方法一: new fileReader().readAsDataURL(file) 方法二: var imgCanvas=document.createElement('canvas'); mgContext=imgCanvas.getContext('2d'); var imgAsDataURL=imgCanvas.toDataURL("image/jpeg"); 缺点 就是任何图片都被png了 编码出来的字符串大小可能要比原图编码出来的要大 demo 可以在控制台运行

var file = document.createElement('input'); file.type = 'file'; document.body.appendChild(file); file.onchange=function(){ var reader=new FileReader() reader.onload = function ( event ) {console.log(event.target.result);}; reader.readAsDataURL(file.files[0]); } 结果 data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL.... 然后调用:

Base64 在CSS中的使用 .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); } Base64 在HTML中的使用 <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." /> 好处:

data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址, 现在不会有新的网络访问了,因为现在这里是网页的内容。这样做,会减少服务器的负载, 当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

data类型Url的形式 既然是Url,当然也可以直接在浏览器的地址栏中输入。 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。

坏处呢,就是浏览器不会缓存这种图像。

如果你用的是IE8,如果你想编码图片,更简单的方法是,自己写一个HTML网页,把本地图片放进去,然后用IE8打开该网页,然后保存为mht文件,然后用记事本打开mht文件,你就会看 到图片以及被编码过了,直接拷贝之,粘贴之,加上data:image/jpeg;base64,等前缀,搞定之。 在mht文件中,每一个NextPart下面都会有类似下面的几行说明字段: Content-Type: image/jpeg Content-Transfer-Encoding: base64 Content-Location: file:///E:/cat2.jpg 根据这些信息就可以知道是用什么方式编码的什么格式的文件了

目前,Data URI scheme支持的类型有:

data:,文本数据 data:text/plain, 文本数据 data:text/html, HTML代码 data:text/html;base64, base64编码的HTML代码 data:text/css, CSS代码 data:text/css;base64, base64编码的CSS代码 data:text/javascript, Javascript代码 data:text/javascript;base64, base64编码的Javascript代码 data:image/gif;base64, base64编码的gif图片数据 data:image/png;base64, base64编码的png图片数据 data:image/jpeg;base64, base64编码的jpeg图片数据 data:image/x-icon;base64, base64编码的icon图片数据 base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.01.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档