获取图片的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. Asp.Net WebAPI配置接口返回数据类型为Json格式

    Asp.Net WebAPI配置接口返回数据类型为Json格式   一.默认情况下WebApi 对于没有指定请求数据类型类型的请求,返回数据类型为Xml格式 例如:从浏览器直接输入地址,或者默认的XM ...

  2. SQL Server创建Job， 实现执行相同脚本而产生不同作业计划的探究

    1 . 背景描述 本公司的SQL Server 服务器近百台,为了收集服务器运行的状态,需要在各个实例上部署监控Job,将收集到的信息推送到中央管理服务器. 收集的信息主要包括:慢查询.阻塞.资源等待 ...

  3. Springboot整合Kfka

    1.首先在pom文件添加依赖 The managed version is 1.1.7.RELEASE The artifact is managed in org.springframework.b ...

  4. “百度杯”CTF比赛 十月场 Hash 复现

    进入题后老套路得到两个关键: 1.$hash=md5($sign.$key);the length of $sign is 8 2.key=123&hash=f9109d5f83921a551 ...

  5. Mysql基本命令及数据库存储位置

    连接数据库: sudo mysql -p+密码 例如:sudo mysql -p123456 1.显示数据库列表. show databases; 2.显示库中的数据表: use mysql: //打 ...

  6. 普通PC通过USB转485串口 ModBus-RTU通信协议控制伺服电机

    一.RS485通信 RS485 是半双工通信(2 线制),可以一点对多点进行组网,而且 RS485 是用缆线两端的电压差值来表示传递信号,这与 RS232 电气特性大不一样.RS485 仅仅规定了接收 ...

  7. CRT工具远程登陆Google Cloud远程ssh登录方法

    首先使用Google Cloud SSH连接上去:1.切换到 rootsudo -i12.编辑ssh配置文件vi /etc/ssh/sshd_config13.修改以下内容即可PermitRootLo ...

  8. Linux下find命令用法详解

    Linux下find命令用法详解   学神VIP烟火 学神IT教育:XueGod-IT   最负责任的线上直播教育平台   本文作者为VIP学员 烟火   第一部分:根据文件名查找   1.在当前目录 ...

  9. linux软连接文件的copy

    最近在做项目的时候遇到过一个问题:当copy一个工程模块时发现里面的目录文件有重复定义的情况. 最后查看源文件目录发现是存在软连接造成的. 出现这种情况的原因是:当直接copy文件目录时遇到软连接会把 ...

  10. Python神器 Jupyter Notebook

    什么是Jupyter Notebook? 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文档编写.运行代码和展示结果. Jupyter Not ...