前端开发将图片转换成Base64

前端开发新手 软件
软件开发前端教学视频教程
前端开发软件介绍说明

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
    </head>
    <body>
        选择图片: <input type=”file” id=”img” />
        <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>
深圳软件前端开发培训
前端用的开发软件下载
mac下前端开发软件
» 本文来自:前端开发者 » 《前端开发将图片转换成Base64》
» 本文链接地址:https://www.rokub.com/6922.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!