php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示(代码实例)...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来详细的看一看base64编码:
什么是base64编码?
Base64是一种网络上最常见的用于传输8Bit字节代码的编码方式,Base64编码可用于在HTTP环境下传递较长的标识信息,同时可以放在url当中使用(采用一种用于URL的改进Base64编码)。因为base64不惧可读性,即所编码的数据不会被人用肉眼所直接看到,所以具有一定的加密功能。
为什么要把图片转成base64编码?
将图片转换成base64编码主要是为了用在网页上减少请求次数,我们的网站采用的都是http协议,而http协议是一种无状态的连接,就是连接和传输后都会断开连接节省资源。此时解决的方法就是尽量的减少http请求,此时base64编码可以将图片添加到css中,实现请求css即可下载下来图片,减少了再次请求图片的请求。
html5如何实现把上传的图片转成base64编码在显示?
将图片转换成base64需要使用到一个html5的接口:FileReader.readAsDataURL()接口,这个接口可以将文件转换成base64编码格式,并且再以data:URL的形式展现出来
思路:
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.在执行转换和输出之前先判断一下上传文件是不是图片。
代码如下:
html5 图片转base64编码
* {
margin: 0;
padding: 0;
}
.demo{
width: 100%;
margin: 50px;
}
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.onload = function() {
base64_code.innerHTML = this.result;
//this.result里的这个result是FileReader.readAsDataURL()接口当中转换完图片输出的base64结果存放在result当中
img_area.innerHTML = '
';
}
}
看看效果图:
总结:以上就是在HTML5里实现图片转base64编码的全部代码,大家可以自己动手编译试试。
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示(代码实例)...相关推荐
- html5 上传 原理,浅谈使用HTML5的FormData上传文件原理!!!
[书山有路勤为径,学海无涯苦作舟] //一.FormData背景介绍 //表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自 ...
- html背景图片自适应纵向,HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验...
用什么代码实现?不允许有白色底色产生,因为手机高度不一样 错误的写法:加到div中结合图片设置min-height,但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:1 ...
- 微信小程序码buffer转为图片php,微信小程序将网络图片转成base64数据
微信开发中图片上传是很常见的功能点之一,那么如果需要我们将网络图片转换成所需要的base64数据格式,微信小程序中我们要如何实现呢? 效果如图: 需要获取网络数据,我们需要先了解微信api中的wx.r ...
- python图片转为二进制流_python将图片转为二进制-女性时尚流行美容健康娱乐mv-ida网...
女性时尚流行美容健康娱乐mv-ida网 mvida时尚娱乐网 首页 美容 护肤 化妆技巧 发型 服饰 健康 情感 美体 美食 娱乐 明星八卦 首页 > 高级搜索 mysql 5.7.9 lin ...
- PIL读入图片转为BGR
PIL读入图片默认通道顺序是RGB,可通过下面程序将图片转为BGR顺序 image = Image.open(img) # 读入图片 image = image.convert("RGB&q ...
- html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟 鼠标悬浮 图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果 代码结构 1. 引入CSS 2. HTML代码 va ...
- vue实现PS效果,鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字(类似QQ截图输入文字)、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码 最终效果 部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
- java 后端根据传入参数生成HTML并转换成Base64图片字节码(以及FTP上传常用)
方案一 将数据拼接成HTML字符串报道到指定地址,读取html转成base64Img数据 1>将字符串转成HTML并保持 String str="<!DOCTYPE html&g ...
- mui ajax 传递base64,HTML5 MUI 手机预览图片,裁剪上传base64,保存数据库
app和网站页面都可以使用 需要的文件: 这些都需要,这些文件在下文的参考网址可以下载 页面头部引用: 页面底部引用(但是在body里): 布局: //触发选择图片事件 //默认图片以及选择裁剪后展示 ...
最新文章
- html根据字段制作曲线图,canvas制作简单的HTML图表,折线或者矩形统计(原创)
- 伪共享 FalseSharing (CacheLine,MESI) 浅析以及解决方案
- 单选框_vue实现单选框自定义样式
- linux系统调用(syscall)原理
- SAP中会计凭证和物料凭证的对应关系
- bugku——分析(流量分析)题解
- 万字长文带你了解蚁群算法及求解复杂约束问题【源码实现】
- CommandLineRunner与ApplicationRunner接口的使用及源码解析
- 分布式文件系统HDFS解析
- html dot标签,html – CSS Dot符号命名约定
- 浅析GitLab Flow的十一个规则
- 小学网上报名显示网上服务器错误,网上申请了小学学位 区教育局找不到信息...
- IDEA 导出配置方法
- Multisim 14.0安装包+详细安装步骤
- linux内核丢弃udp报文,UDP内核丢弃UDP数据包
- iTextSharp 添加文字内容
- YNOI板刷计划记录
- iOS 跳转淘宝、天猫、京东商品详情页
- ORACLE幻读(一)
- 蚁群算法解决tsp问题python_蚁群算法在解决TSP问题中的应用