将图片转换成Base64

来源：互联网发布：oa网络地板编辑：程序博客网时间：2024/04/26 22:44
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        选择图片：  <input type="file" id="img">  <br/>  <button id="start">开始转换</button>  <div>      预览：<img id="imgShow" src="" alt="">  </div>  <b>Base64数据：</b>  <textarea rows=15 cols=60 id="conte"></textarea>  <button id='cpData'>复制</button><span id="succ"></span>  <div id="len">数据长度：</div>  <script>      var img = document.getElementById('img')          , imgShow = document.getElementById('imgShow')          , conte = document.getElementById('conte')          , len = document.getElementById('len')          , start = document.getElementById('start')          , cpData = document.getElementById('cpData');      cpData.addEventListener('click', cpDataF);      start.addEventListener('click', startt);      /*转换函数*/      function startt() {          var imgFile = new FileReader();          imgFile.readAsDataURL(img.files[0]);          imgFile.onload = function () {              var imgData = this.result; //base64数据                imgShow.setAttribute('src', imgData);              conte.value = imgData;              len.innerHTML += imgData.length;          }      }      /*复制数据*/      function cpDataF() {          conte.select(); // 选择对象            var cpd=document.execCommand("Copy"); // 执行浏览器复制命令            cpd ? document.getElementById('succ').innerHTML = '复制成功' :　console.warn('复制失败');          window.setTimeout(function () {              document.getElementById('succ').innerHTML = '';          }, 1000)      }  </script>      </body></html>
0 0