HTML怎么转换base64教程,html5将图片转换成base64代码
我们为什么要把图片转换成base64代码?
base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能。
将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http请求。但是也会有一个小缺点,就是图片编码化base64的时候大小会变大,但是通过gzip优化以后基本差不多。所以在应用的过程当中较小的图片可以直接编码成base64,较大的图片则不建议如此使用。
html5如何将图片转换成base64?
html5如果要将图片转换成base64需要使用到一个html5的接口FileReader.readAsDataURL()接口说明,这个接口可以将文件转换成base64编码格式,并且再以data:URL的形式展现出来。
示例程序
下面的代码是示例程序,创建一个新html文件,然后将代码复制粘贴使用支持html5的浏览器打开即可查看效果。
html5 image to base64
window.onload = function(){
// 抓取上传图片,转换代码结果,显示图片的dom
var img_upload=document.getElementById("img_upload");
var base64_code=document.getElementById("base64_code");
var img_area=document.getElementById("img_area");
// 添加功能出发监听事件
img_upload.addEventListener('change',readFile,false);}
function readFile(){
var file=this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.οnlοad=function(){
base64_code.innerHTML = this.result;
img_area.innerHTML = '
';
}
}
html5图片转换base64代码
程序的设计思路
1.创建三个html标签,input用来上传图片,textarea用来显示base64代码,因为base64代码内容很多所以使用textarea标签,p标签用来显示图片。
2.使用js调用html5的FileReader.readAsDataURL()的API,声明三个变量用于控制图片上传,base64代码显示以及图片的显示。
3.img_upload.addEventListener('change',readFile,false);添加一个监听事件,如果上传文件发生变化就执行readFile函数。
4.readFile函数的内容就是调用接口,将图片转换成base64再输出。
5.在执行转换和输出之前先判断一下上传文件是不是图片。
代码解析及注意
1.var file=this.files[0];这里是抓取到上传的对象。
2.this.result这个result是FileReader.readAsDataURL()接口当中转换完图片输出的base64结果存放在result当中。在代码当中添加console.log(reader);查看一下FileReader对象就可以看到。(reader是我自己起的对象的名称)
FileReader.png
我使用html5将图片转换成base64代码的目的主要是想将图片写入到浏览器本地的数据当中来使用,上传的时候,再尝试恢复出来上传图片。目的是为了减少本地浏览器应用和服务器的数据通信。
HTML怎么转换base64教程,html5将图片转换成base64代码相关推荐
- base64转html文件,图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
- html5将图片转换成base64的实例代码
这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍 base64是一种网络上常用的8bit字节代码的编码方 ...
- php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示(代码实例)...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
- JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库
转载自 JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库 开发环境:struts2+ spring + hibernate 数据库:oracle 需求:在HTML编 ...
- java实现将图片读取成base64字符串,将base64字符串存储为图片。
全栈工程师开发手册 (作者:栾鹏) java教程全解 java实现将图片读取成base64字符串 ,将base64字符串存储为图片. 将图片转化为字符串以后,由于字符串更方便在网络上通过ajax传输. ...
- JavaScript 通过HTML的FileReader把图片转成base64
刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题 代码如下: <img src="data:image/jpeg;base64,/9j/4Q ...
- vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛
vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛 前言 解决 完事 前言 最近的项目中需要在程序中显示一个H5页面,所以按照官方VUE CLI的教程创建了一个项目开始整.整到最后打 ...
- java图片转成base64传给前端
base64 1.base64的含义 2.base64的java转换 1.base64的含义 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,在发送电子邮件时,服务器认证的用户名和 ...
- php图片转字符程序,将图片转成base64字符串的PHP代码
PHP 如何把图片转成 BASE64 编码用PHP把图片转成 BASE64 编码 代码怎么些,要详细的,非常感谢. 请试一试下面的代码 试一试. php图片转base64并保存为文本认识我的人以为我很 ...
最新文章
- 【FFmpeg】结构体详解(二):AVStream、AVPacket、AVOutputFormat
- hivemetastore java,hive启动报错 hive.metastore.HiveMetaStoreClient
- a连接带id转送不了数据_你找到了数据清洗利器?
- linux c warning 'XXX' declared 'static' but never defined解决方法
- 数据中心水冷系统一次泵与二次泵的选择
- 【深度学习】研究揭秘:神经网络越大、表现越好的“神秘力量”
- Python操作SQLLite(基本操作)
- ES6之Module 的加载实现(1)
- react table里跳转页面_react路由配置基础篇:react-router4.0及以上
- python+ seleniumAPPium自动化 page Object 设计模式
- 担心再次被起诉?马斯克已删除特斯拉可能几个月内成为最大公司推文
- SpringBoot整合Redis 之 StringRedisTemplate、RedisTemplate 基础
- 一份点赞上千的《算法》讲义,来自20年教学经验的UIUC计算机教授
- spring boot的gradle整合日志
- 测试有道:微软测试技术心得
- fatal error C1010
- 从客户端登陆服务器的配置文件,从客户端登陆服务器的配置
- python 分词器使用
- matlab中的index函数的使用方法,index函数语法说明及应用实例
- 2020年最新版CSDN博客排名第一名的博客
热门文章
- 深搜与广搜(同步博客内容)
- Jitsi(SIP communicator)的环境部署和打包发布
- Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z
- vue cli 版本更改
- Photoshop7.0教程(八)编辑文字
- canvas绘制七彩随机小球!
- iOS平台使用陀螺仪传感器
- 音频播放器android课程设计,Android课程设计:Android音乐播放器的设计与实现
- 51nod 1479 小Y的数论题 (exgcd)
- 2021最新IDEA初级入门详细教程流出,开发组小伙伴怒赞