之前在群里看到很多小哥哥小姐姐讨论关于图片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. Oracle GoldenGate常用参数详解

    Oracle GoldenGate常用参数详解http://blog.itpub.net/28389881/viewspace-2564461/

  2. 【转载】Java程序模拟公安局人员管理系统

    编程题:公安人员的管理系统1) 学生类:a) 属性:i. 身份号—默认没有,需要手动进行输入ii. 姓名iii. 性别iv. 年龄v. 密码vi. 居住地址vii. 注册日期viii. 人员的信誉程度 ...

  3. 西北师大-2108Java】第十三次作业成绩汇总

    [西北师大-2108Java]第十三次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第15周学习指导及要求 实验目的与要求 (1)掌握菜单组件用途及常用API: (2)掌握对话框组件用途及常用 ...

  4. js对文中某一处关键字自动检索和全文检索

    部分检索: 代码: <%@ page language="java" contentType="text/html; charset=utf-8" pag ...

  5. composer中常用命令

    一些常用的composer命令: # 显示所有已经安装的包 composer show # 移除指定的依赖包package_name composer remove package_name # 搜索 ...

  6. pyhon代码设计格式指南

    一 缘由: 经常看到周围人写的代码,在大公司有规范,很多人不乱写代码,但是在很多小公司,很多程序员都是半路出家,也不喜欢读书学习,导致写出来的代码乱七八糟.今天拜读了python编程这本书,作者把py ...

  7. 使用 html2canvas 点击保存时把当前页面生成图片

     style:   #box{     background-image:url('./img/pone.png')     }   body:   <div id="box" ...

  8. win7怎么使用远程桌面连接（win10类似，同样适用）

     win7使用远程桌面比mac要简单多了,只需在桌面点击“开始”,找到并打开“附件”,点击“远程桌面连接”即可   mac使用远程桌面连接:https://www.cnblogs.com/tu-071 ...

  9. 什么是EAC模型

    在20世纪70年代末,一个心理学学生理查德•班德勒和一个语言学学生约翰•格林德提出了一个EAC模型,即眼睛解读线索.这个模型对不同的感官和思维方式之间进行一些有效的研究, 对于大部分的人来说,左边往往 ...

  10. node http 模块 常用知识点记录

    关于 node,总是断断续续的学一点,也只能在本地自己模拟实战,相信总会有实战的一天~~ http 作为服务端,开启服务,处理路由,响应等 http 作为客户端,发送请求 http.https.htt ...