之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法，刚好我之前用到的一个方法给大家分享一下。

<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片转base64编码</title>
<style>
* {
margin: 0;
padding: 0;
}
.file_div{
width: 50%;
margin: 0px 1px;
padding: 1% 10px;
}
.demo{
width: 50%;
margin: 0px 1px;
padding:0px 10px;
}
.img img
{
width: 600px;
height: 600px;
}
.file {
position: relative;
display: inline-block;
background: #AADFFD;
border: 1px solid #99D3F5;
border-radius: 30px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 130px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>

<script type="text/javascript">
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 = '<div>原图展示：</div><img src="' + this.result + '" alt=""/ class="img">';
}
}
</script>
</head>

<body>
<div class="file_div">
<a href="javascript:;" class="file"> 选 择 图 片
<input type="file" id="img_upload" />
</a>
</div>
<div class="demo">
<textarea id="base64_code" rows="30" cols="100"></textarea>
<p id="img_area" class="img"></p>
</div>
</body>
</html>

很早就出来的一种方法，不过最近在研究图码互转的时候发现一个问题，通过base64编码转成图片的时候，修改格式码里面的格式，比如将jpeg改成png的话，就可以直接无损修改图片格式化了

HTML5之图片转base64编码的更多相关文章

  1. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...

  2. Base64编码 图片与base64编码互转

    package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...

  3. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  5. 图片的Base64编码

    Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...

  6. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 字符串与图片的Base64编码转换操作

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  8. 图片和base64编码字符串 互相转换，图片和byte数组互相转换

    图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...

  9. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

随机推荐

  1. JavaScript banner轮播 左右切换 圆点点击切换

    1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. [Go] 实现websocket服务端

    直接使用官方子包可以实现websocket协议, golang.org/x/net/websocket 如果在这个目录没有这个包就去github下载net库,放进这个目录$GOPATH/src/gol ...

  3. mysql windows 安装5.7

    E:\MySQL\MySQLServer57\bin>net start mysqlMySQL 服务无法启动. 解决办法: 手动在安装目录创建文件 my.ini [mysql] # 设置mysq ...

  4. Python函数（函数定义、函数调用）用法详解

    Python 中,函数的应用非常广泛,前面章节中我们已经接触过多个函数,比如 input() .print().range().len() 函数等等,这些都是 Python 的内置函数,可以直接使用. ...

  5. Java 添加Word文本水印、图片水印

    水印是一种常用于各种文档的声明.防伪手段,一般可设置文字水印或者加载图片作为水印.以下内容将分享通过Java编程给Word文档添加水印效果的方法,即 文本水印 图片水印 使用工具:Free Spire ...

  6. 使用Redis实现UA池

    前提 最近忙于业务开发.交接和游戏,加上碰上了不定时出现的犹豫期和困惑期,荒废学业了一段时间.天冷了,要重新拾起开始下阶段的学习了.之前接触到的一些数据搜索项目,涉及到请求模拟,基于反爬需要使用随机的 ...

  7. Asp .Net Core Excel导入和导出

    ASP .Net Core使用EPPlus实现Api导入导出,这里使用是EPPlus 4.5.2.1版本,.Net Core 2.2.在linux上运行的时候需要安装libgdiplus . 下面我们 ...

  8. 计算机网络知识（TCP连接，TCP/UDP区别，HTTP与HTTPS，Socket原理等等）

    1.网络七层协议包含,物理层.数据链路层.网络层(ip协议).传输层(TCP传输控制协议.UDP用户数据报协议).会话层.表示层.应用层(http协议).是一个提供的概念架构协议. 2.TCP/IP协 ...

  9. js 对 只包含简单类型数据的对象 为元素 组成的数组 进行去重

    /** * 对于由简单类型数据组成的对象为元素组成的数组进行去重操作 * @params {Array} 需要去重的对象数组 * @returns {Array} 去重后的对象数组 */ functi ...

  10. 谁说程序员不浪漫？Python导出微信聊天记录生成爱的词云图

    明天又双叒叕是一年一度的七夕恋爱节了! 又是一波绝好的机会!恩爱秀起来! 购物车清空!礼物送起来!朋友圈晒起来!   等等! 什么?! 你还没准备好七夕礼物么? 但其实你不知道要送啥? 原来又双叒叕要 ...