之前在群里看到很多小哥哥小姐姐讨论关于图片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. centos和Ubuntu系统最小化安装基础命令

    CentOS系统常用的基础软件如下 yum install vim iotop bc gcc gcc-c++ glibc glibc-devel pcre \ pcre-devel openssl o ...

  2. java之List接口（单列集合）

    List接口概述 查询API我们可知:java.util.List 接口继承自 Collection 接口,是单列集合的一个重要分支,习惯性地会将实现了 List 接口的对 象称为List集合.在Li ...

  3. Flink| 运行架构

    1. Flink运行时组件 作业管理器(JobManager) 任务管理器(TaskManager) 资源管理器(ResourceManager) 分发器(Dispatcher) 2. 任务提交流程 ...

  4. gmail 批量删除邮件

    前几天我在 github上 star 了一下 angular 项目,然后8,9 天的时间收到了很多邮件,起初我没注意看具体数量,直接全选-删除.结果删了 3,4 页了还有很多.再仔细一看,一万多封邮件 ...

  5. ubuntu下面安装nodejs

    对于刚接触ubuntu的同学来说,一切都是新的,一切都是那么熟悉而又不熟悉的.不管是作为一个前端工程师还是一个后端工程师,我相信大家知道nodejs,但是如果希望自己能够在ubuntu上面使用node ...

  6. eclipse的一些常用快捷键

    掌握了eclipse快捷键功能,能够大大提高开发效率. 这里总结一些eclipse的常用快捷键. 编辑相关快捷键  1. [ALT+/]:此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不 ...

  7. VS2010到VS2019各个版本的密钥

    VS2019专业版和企业版的密钥 Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Profe ...

  8. C# calculate disk size

    static void Main(string[] args) { string dir = @"C:\"; string[] dirs=Directory.GetDirector ...

  9. [browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容

    先上图吧 来上代码 console.log(window.outerWidth + '--' + window.outerHeight);//只读的整数,声明了整个窗口的XY //IE 不支持此属性, ...

  10. 通过 RxSwift 优雅使用 NotificationCenter

    原文 纯粹的官方代码使用NotificationCenter真的很难用,但是有了RxSwift,就变得方便了很多. 修改 Podfile,通过pod引入RxSwift pod 'RxSwift' po ...