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

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

先看效果：

选择图片：
<input type="file" id="imgURL">
<br/>
<button id="start">开始转换</button>
<div>
    预览：<img id="src" src="" alt="">
</div>
<b>Base64数据：</b>
<textarea rows=15 cols=60 id="conte"></textarea>
<button id='btn'>复制</button><span id="succ"></span>
<div id="len">数据长度：</div>
<script>
    var img = document.getElementById('imgURL');
    var imgShow = document.getElementById('src');
    var conte = document.getElementById('conte');
    var len = document.getElementById('len');

    function start() {
        var imgFile = new FileReader();
        imgFile.readAsDataURL(img.files[0]);
        imgFile.onload = function () {
            var imgURL = this.result;//base64数据
            imgShow.setAttribute('src', imgURL);
            conte.value = imgURL;
            len.innerHTML += imgURL.length;
        }
    }
    btn.addEventListener('click', function () {
        conte.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        document.getElementById('succ').innerHTML = '复制成功';
        window.setTimeout(function () {
            document.getElementById('succ').innerHTML = '';
        }, 1000)
    })
    document.getElementById('start').addEventListener('click', start);
</script>

使用方法就不说了，大家都懂