主要使用到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>
相关推荐
通过执行该工具,批量将图片转成base64的js文件,适合配合微信小程序图标使用!
简介 Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个...当然,你也可以将图片、文本和音视频转换成二进制序列,再然后转换为Base64编码。我们这里讨论的是如何将二进制转换
图片base64编码互转工具是广大站长朋友非常实用的...将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。...灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食。 前端对文件进行base64编码并通过aj
使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格式,后台通过高级编程语言,将base64格式的文件,转换为原文件。下面就来演示一下,C#语言配合js,如何实现图片的base64格式上传与解析保存。...
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”... <head> ...background-co
主要介绍了Javascript将图片的绝对路径转换为base64编码的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。 将图片转换成base64编码的,在web...
CTF编码工具是各种编码解码离线集成:包括base64,base32,base16,base85(a),base85(b),base58,base36,base91,base92,培根bacon,摩斯,键盘,猪圈,Rot13,Quoted,Atbash,JSFuck,JJEncode,BrainFuck,...
最近需要把app的微信分享方法开放给webview,涉及到分享的图片,如果通过传送图片连接,那将要在后台再取一次图片文件,会影响速度,我选择webview把image以base64位编码的方式传给本地应用。 下面是实现的参考代码...
一. Base64编码由来 为什么会有Base64编码呢?...Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法。 二. Base64编码原理 看一下Base64的索引表,字符选用了”A-Z、a-z、0-9、+、
1、使用jquery操作 2、使用方法直接打开hello.html即可 3、打开控制台查看压缩结果 4、base64 图片转换在线网站 https://www.it399.com/image/base64,失效了可以自己百度一个
CTF编码工具是各种编码解码离线集成:包括base64,base32,base16,base85(a),base85(b),base58,base36,base91,base92,培根bacon,摩斯,键盘,猪圈,Rot13,Quoted,Atbash,JSFuck,JJEncode,BrainFuck,...
Clip_B64 该项目旨在将文件内容复制到剪贴板。 在linux / cygwin中,有一些简单的命令可以这样做: ... 结果经过base64编码,可以从剪贴板粘贴到putty-ssh远程shell窗口中,并可以使用控制台命令base64 -d解码。
使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = http://huoche.7234.cn/images/jb51/uydvrgxohte.jpg; // var imgSrc = img/1....
图片base64编码互转工具是广大站长朋友非常实用的... 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。
在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据。 目前,Data URI scheme支持的类型有: data:,文本数据...
CTF编码工具是各种编码解码离线集成:包括base64,base32,base16,base85(a),base85(b),base58,base36,base91,base92,培根bacon,摩斯,键盘,猪圈,Rot13,Quoted,Atbash,JSFuck,JJEncode,BrainFuck,...