照片转换成html5编码,HTML5之图片转base64编码

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

图片转base64编码

* {

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;

}

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 = '

原图展示：

';

}

}

选 择 图 片

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