img 转base64

最新推荐文章于 2024-05-31 09:05:13 发布

chixian4839

最新推荐文章于 2024-05-31 09:05:13 发布

阅读量145

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2499632/blog/857859

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:;" class="input-file">
<input accept="image/*" name="upimage" id="upload_file" type="file">
</a>
</td>
<td><input type="button" value="Base64编码" οnclick="gen_base64()"/></td>
<td>
<input value="还原生成的Base64编码为图片：" class="tools_btn02" type="button" οnclick="test_base64();">
</td>
<td>

</td>
</tr>
</table>
<div id="img_size" style="display:none"></div>
<textarea id="base64_output" name="Word" style="height:200px; width:820px;"></textarea>
<img id="img_prev" src="" style="max-width:100%;border: 1px solid gray;" data-bd-imgshare-binded="1">
</body>
</html>
<script>
       function $_(id) {
                   return document.getElementById(id);
               }
               function gen_base64() {
                   $_('base64_output').value = '';
                   $_('img_size').innerHTML = '';
                   $_('img_prev').src = '';
                   var file = $_('upload_file').files[0];
                   if(!/image\/\w+/.test(file.type)){
                       alert("请确保文件为图像类型");
                       return false;
                   }
                   r = new FileReader(); //本地预览
                   r.onload = function(){
                       $_('base64_output').value = r.result;
                       $_('img_size').innerHTML = " 图片大小：" + Math.round(r.result.length/1024*1000)/1000 + " KB";
                   }
                   r.readAsDataURL(file); //Base64
                   alert("编码成功");
               }
               function test_base64() {
                   $_('img_prev').src = '';
                   $_('img_prev').src = $_('base64_output').value;
               }