获取图片的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. 周一02.4变量&垃圾回收机制

    一.变量 1. 什么是变量 量:记录事物的某种状态,即事物典型的特征 变:事物的状态是可以发生变化的 2. 为何要用变量 是为了让计算机能够像人一样记录事物的状态 3. 如何用变量 (先定义后引用) ...

  2. 项目中遇到angular时间插件datetinepicker汉化问题

    问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...

  3. Cordova入门系列（二）分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html

    Cordova入门系列(二)分析第一个helloworld项目   版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...

  4. Python函数默认参数的陷阱

    默认参数实际上只有一个值 代码1 def func(l = 1): l += 1 print(l) func() func() func() 代码2 lst = [] def func(a,l = l ...

  5. java网络编程基本知识

    1.基本概念 网络:一组相互连接的计算机,多台计算机组成,使用物理线路进行连接 网络连接的功能:交换数据.共享资源 网络编程3要素: IP 地址:唯一标识网络上的每一台计算机,两台计算机之间通信的必备 ...

  6. Python学习案例之视频人脸检测识别

    前言 上一篇博文与大家分享了简单的图片人脸识别技术,其实在实际应用中,很多是通过视频流的方式进行识别,比如人脸识别通道门禁考勤系统.人脸动态跟踪识别系统等等. 案例 这里我们还是使用 opencv 中 ...

  7. 《你必须掌握的Entity Framework 6.x与Core 2.0》勘误

    第5章 5.1.1----致谢网友[宪煌] public virtual ICollection Post {get;set;} 修改为 public virtual ICollection<P ...

  8. 随心测试_软测基础_004<测试人员工作职责>

    接上篇续,依据_软测基础体系:<依据不同的测试对象,选取适合的方法,按照设计的流程完成测试工作,检验整个过程是否达到测试的目的>.“学以致用”,实践于工作职责 常见面试题: —— 诸如以下 ...

  9. ABP之多租户

    “软件多租户”指的是一种软件架构,一个软件实例在一个服务器上运行,但为多个租户服务.租户们对软件实例有通用的访问入口,但是每个租户都有特定的权限. 在多租户体系架构中,用程序旨在为每个租户提供一个专用 ...

  10. Python两个栈实现一个队列

    牛客网原题: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型.   实现这个算法的方式有很多种,这里就写一种比较简单易懂的:虽然可能算法和效率上不太出色,当大多数人 ...