js小工具---本地图片转换为base64编码数据

最新推荐文章于 2025-10-16 11:39:50 发布

最新推荐文章于 2025-10-16 11:39:50 发布 · 1.6k 阅读

文章标签：

#javascript #HTML5 #base64 #web #html #ViewUI

js小工具专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML5的FileReader对象将用户选择的图片文件转换为Base64编码格式，并展示如何预览图片及复制Base64数据。

主要使用到HTML5强大的FileReader对象(大家可以尝试使用canvas的toDataURL方法应该也是可以的)

先看效果：

选择图片：
<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>