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

时间:2022-11-11 22:30:12

今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据。所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用。

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

js代码如下:

    <!DOCTYPE> # 这是将代码复制到一个文件后命名为html格式文件后用浏览器打开即可使用小工具转换
<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>