之前在群里看到很多小哥哥小姐姐讨论关于图片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. appium---模拟点击事件

    在做自动化的过程中都会遇到一些无法定位到的地方,或者通过元素怎么都定位不成功的地方,这个时候我们可以使用必杀技,通过坐标定位.具体的怎么操作呢? swipe点击事件 前面安静写过一篇关于swipe的滑 ...

  2. 清除Windows系统图标缓存

    如果改变程序图标重新编译之后看到的图标并未改变,这可能不windows缓存了之前的图标导致的,需要清除Window的图标缓存来显示正确的图标. 下面是清除Windows系统图标缓存的批处理代码: re ...

  3. 编译出错：must be index or base register

    指令 mov ds:[dx],dx 原因:上述指令使用寄存器相对寻址方式,只能使用BX,BP,SI,DI 方括号里必须是变址(index,指SI, DI)或基址(base,指BX, BP)寄存器 正确 ...

  4. Ubuntu16.04 GTX750安装CUDA9.0，Pytorch，Anaconda教程

    Ubuntu16 GTX750安装CUDA9.0,Pytorch,Anaconda教程 安装前警告 不要使用Ubuntu18! 不要使用Ubuntu18! 不要使用Ubuntu18! 务必重装成Ubu ...

  5. 批量修改含空格的文件名「Linux」

    1.问题:文件批量重命名和处理文件名中的空格 如果文件名中有空格,在执行以下shell脚本的时候会出错. shell 脚本 for filename in `ls` do echo $filename ...

  6. Charles 使用笔记

     一.介绍 Charles 属于抓包软件. Charles 多平台支持,mac.windows.linux. Charles 是收费软件,可以免费试用 30 天.试用期过后,未付费的用户仍然可以继续使 ...

  7. C#深入浅出之数据类型

    基本数据类型        C#支持完整的BCL(基类库)名字,但是最好都统一使用关键字进行使用与开发,比如使用int而不是System.Int32,以及使用string类型时候应当使用string而 ...

  8. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. Prism_Commanding(2)

    Commanding 除了提供对要在视图中显示或编辑的数据的访问之外,ViewModel还可能定义可由用户执行的一个或多个动作或操作.用户可以通过UI执行的动作或操作通常被定义为命令.命令提供了一种方 ...

  10. 松软科技带你学开发:SQL--FIRST() 函数

    FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...