base64图片转码

怎么把图转成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 字符,

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Vue2.5笔记:Vue的实例与生命周期

理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们...

872
来自专栏Alan's Lab

如何编写一个 jQuery 插件

https://github.com/zcfan/sket... 重写了本文的初步功能实现,支持一个页面多个画图板。但为简单起见,本文保持不变。

1284
来自专栏FreeBuf

XSS编码剖析

作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在f...

2958
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5077
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

1983
来自专栏偏前端工程师的驿站

前端构建:Less入了个门

一、前言                                说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scs...

1917
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

4K6
来自专栏JetpropelledSnake

Vue学习笔记之Vue的使用

我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。

893
来自专栏DeveWork

WordPress 中部署真正的懒加载(Lazy Load)

不少WordPress 主题(包括DeveWork.com目前的主题)都有部署jquery 插件“懒加载”(Lazy Load),但其实很多都不能产生真正的懒加...

2177
来自专栏coding for love

JS常用设计模式解析01-单例模式

考虑实现如下功能,点击一个按钮后出现一个遮罩层。 原始办法:我们只需要实现一个创建遮罩层的函数并将其作为按钮点击的回调事件即可。如下:

1252

扫码关注云+社区

领取腾讯云代金券