将图片转换成Base64

一时失言乱红尘 2022-07-13 11:09 333阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         选择图片：  
  9. <input type="file" id="img">  
  10. <br/>  
  11. <button id="start">开始转换</button>  
  12. <div>  
  13.     预览：<img id="imgShow" src="" alt="">  
  14. </div>  
  15. <b>Base64数据：</b>  
  16. <textarea rows=15 cols=60 id="conte"></textarea>  
  17. <button id='cpData'>复制</button><span id="succ"></span>  
  18. <div id="len">数据长度：</div>  
  19. <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>  
  20.     </body>
  21. </html>

发表评论

表情：
评论列表 （有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

    相关 将图片转成base64格式

    将图片转成base64好处是减少页面的http请求,个人建议用在那种多页面用同一张比较小的图，因为大的图转码生成的字符串编码会很长,写入页面影响页面的可读性，不怎么方面后期的调

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 482 阅读