获取图片的base64编码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input accept="image/*" name="upimage" id="upload_file" type="file">

        <textarea id="base64_output" name="Word" style=" width:820px"></textarea>

        <script type="text/javascript">

            document.getElementById("upload_file").onchange = function () {

                gen_base64();

            };

            function $_(id) {

                    return document.getElementById(id);

            }

            function gen_base64() {

                var file = $_('upload_file').files[0];

                r = new FileReader();  //本地预览

                r.onload = function(){

                    $_('base64_output').value = r.result;

                }

                r.readAsDataURL(file);    //Base64

            }

        </script>

    </body>

</html>

JS 获取图片的base64编码的更多相关文章

  1. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  2. [转]JS将图片转为base64编码

    本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...

  3. 如何获取图片的base64编码

    1.准备一张图片,比如1.gif 2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source 3.使用方法: 注意source获取的一串 ...

  4. angularJS <input type="file> 图片的base64编码

    talk is cheap show me the code <input type="file" id="file" name="file&q ...

  5. 本地图片转base64编码

    通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没 ...

  6. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  8. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  9. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

随机推荐

  1. pyspider爬网页出现中文乱码的解决办法

    为什么会出现乱码呢?按照binux的说法 这就是 lxml 的蛋疼之处,给它 unicode 它有的时候它不认,给它 bytes 它又处理不好 方法1: response.content = (res ...

  2. 使用sftp操作文件并添加事务管理

    本文主要针对文件操作的事务管理,即写文件和删除文件并且能保证事务的一致性,可与数据库联合使用,比如需要在服务器存文件,相应的记录存放在数据库,那么数据库的记录和服务器的文件数一定是要一一对应的,该部分 ...

  3. 【java学习】Intelli Idea集成开发工具的使用

    == mac版直接下载地址: https://download.jetbrains.com/idea/ideaIU-2018.1.6.dmg   ==mac配置java环境变量: https://ji ...

  4. var、let 及 const 区别

    var console.log(a) // undefined var a = 1 从上述代码中我们可以发现,虽然变量还没有被声明,但是我们却可以使用这个未被声明的变量,这种情况就叫做提升,并且提升的 ...

  5. Couchbase入门——环境搭建以及HelloWorld

    一.引言 NoSQL(Not Only SQL),火了很久了,一直没空研究.最近手上一个项目对Cache有一定的要求,借此机会对NoSQL入门一下.支持NoSQL的数据库系统有很多,  比如Redis ...

  6. Eclipse中快捷键Ctrl + Alt + 向上箭头 或者 Ctrl + Alt + 向下箭头与Windows冲突

    原文地址:https://blog.csdn.net/buaaroid/article/details/50804608 clipse中按ctrl + alt + 向上箭头没有任何反应,按ctrl + ...

  7. VisualStudio 快捷键

    ctrl + o : 打开当前文件所在文件目录 ctrl + 鼠标左键 : 转到方法或者字段定义

  8. centos下安装Vmware-tools时出现的问题

    今天装了centos,想共享一个文件,需要安装Vmware-tools. 正常的步骤: 安装Vmware-tools 1.挂载VMwareTools光驱.虚拟机选项栏中选[虚拟机]-->[安装v ...

  9. springboot启动关闭脚本

    springboot项目jar包启动,application.properties.jar包.shell脚本.static目录(静态页面和jar包分离)在同一目录下 [start.sh] #!/bin ...

  10. springdata 多对多配置