图片转换Base64的js工具

最新推荐文章于 2024-01-06 22:00:49 发布

GISHUB

最新推荐文章于 2024-01-06 22:00:49 发布

阅读量263

点赞数

分类专栏：开发工具文章标签： js

原文链接：https://www.cnblogs.com/ranxf/p/8946243.html

版权

开发工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片转换Base64</title>
  </head>
  <body>
    <input type="file" id="imgSrc" />
    <button id="startConvect">开始转换</button>
    <table style="width: 100%;" >
      <tr>
        <td>预览</td>
        <td>Base64数据</td>
      </tr>
      <tr>
        <td style="width: 50%;">
          <img id="imgShow" src="" style="clear: both; display: block; margin: auto;"/>
        </td>
        <td>
          <textarea id="base64" rows="30" cols="100"></textarea>
        </td>
        <tr>
            <td><div id="base64Length">Base64数据长度</div></td>
            <td><button id="copyData">复制</button><span id="result"></span></td>
          </tr>
      </tr>
    </table>
    <script>
      let imgSrc = document.getElementById('imgSrc')
      let imgShow = document.getElementById('imgShow')
      let base64 = document.getElementById('base64')

      document.getElementById('copyData').addEventListener('click', copyData)
      document.getElementById('startConvect').addEventListener('click', startConvect)

      /*转换函数*/
      function startConvect() {
        var imgFile = new FileReader()
        imgFile.readAsDataURL(imgSrc.files[0])
        imgFile.onload = function () {
          let imgBase = this.result //base64数据
          imgShow.setAttribute('src', imgBase) //展示
          base64.value = imgBase
          document.getElementById('base64Length').innerHTML = `Base64数据长度:${imgBase.length}`
        }
      }

      /*复制数据*/
      function copyData() {
        base64.select() // 选择对象
        let result = document.getElementById('result')
        result.innerHTML = '复制' + document.execCommand('Copy') ? '成功' : '失败' // 执行浏览器复制命令
        window.setTimeout(function () {
            result.innerHTML = ''
        }, 1000) // 清除信息
      }
    </script>
  </body>
</html>

参考：https://www.cnblogs.com/ranxf/p/8946243.html

GISHUB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片转换Base64的js工具

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <t
复制链接

扫一扫

专栏目录