JS 图片转Base64

有时候需要向HTML中插入一张图片，可苦于上线后找不到一个合适的网盘来存储这些图片，有没有一种办法能将图片转换成文字，然后直接插入HTML中呢，通过Base64编码就可以解决这个问题。

废话不多说直接上代码。不知道什么是Base64的请自行百度。

JS 图片转Base64


图片转Base64 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 图片转Base64</title>
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
function run(input_file,get_data){
/*input_file：文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if ( typeof(FileReader) === 'undefined' ){
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
} else {
try{
/*图片转Base64 核心代码*/
];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function(){
get_data(this.result);
}
reader.readAsDataURL(file);
}catch (e){
alert('图片转Base64出错啦！'+ e.toString())
}
}
}
$(function () {
$("input").change(function () {
run(this, function (data) {
$('img').attr('src',data);
$('textarea').val(data);
});
});
});
</script>
</head>
<body>
<input type="file">
<hr>
<img style="max-height: 300px; height: 8em; min-width:8em;">
<hr>
<textarea  style="display: block; width: 100%;height: 30em;"></textarea>
</body>
</html>

Base64图片的使用

Base64格式: data:[][;charset=][;base64],

Base64 在CSS中的使用: .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64 在HTML中的使用: <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

巴特西

JS 图片转Base64

JS 图片转Base64

Base64图片的使用

最新文章

热门文章