<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<input type="file" id="inp">

<img id="img">

<script>

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

    var file = this.files[0];

    var a = new FileReader();

    a.onload = function (e) {

      console.log(e);

      var base64 = e.target.result;

      document.getElementById("img").src = base64

    }

    a.error = function () {

      console.log("失败");

    }

    a.readAsDataURL(file);

  }

</script>

</body>

</html>

【转载】将本地图片转成base64的更多相关文章

  1. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  2. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  3. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  5. 网络图片转换到本地并转换成base64位

    /** * 网络图片转换到本地并转换成base64位 * @param $url * @return string */ public function imgzhuanhuan($url) { // ...

  6. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  7. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  8. delphi将图片转换成Base64编码函数

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  9. php 处理图片 将图片转成base64

    1.直接将图片路径传入下面该方法就可以了//将图片转成base64 public function imgToBase64($img_file){ $img_base64 = ''; if ($img ...

随机推荐

  1. 苹果的AR赌注仍然有很多需要证明的

    苹果公司为开发者主题发布会做准备,其中一个更大的公告很可能是其增强现实平台的新变化.自从去年宣布ARKit以来,这家科技巨头几乎对其对AR的潜力抱有信心. 在很多讨论背后,人们都相信技术的实用性,但在 ...

  2. AI比医生更好地发现皮肤癌，未来计算机技术可渗透医院

    未来机器人将取代医生?这可能是事实.为什么这么多年轻人选择计算机行业,因为这是一个趋势.据法新社报道,研究人员周二称,一项计算机技术比人类皮肤科医生在检测皮肤癌方面的表现要好得多,因为这项研究是为了寻 ...

  3. django model的get和filter方法的区别

    django的get方法: 1django的get方法是从数据库的取得一个匹配的结果,返回一个对象,如果记录不存在的话,它会报错. 2如果你用django的get去取得关联表的数据的话,而关键表的数据 ...

  4. 【leetcode】331. Verify Preorder Serialization of a Binary Tree

    题目如下: One way to serialize a binary tree is to use pre-order traversal. When we encounter a non-null ...

  5. Java基本数据类型及所占字节大小

    一.Java基本数据类型 基本数据类型有8种:byte.short.int.long.float.double.boolean.char 分为4类:整数型.浮点型.布尔型.字符型. 整数型:byte. ...

  6. AshMap如何让hash保持一致

    学Java的都知道hashMap的底层是“链表散列”的数据结构也也可以说是hash表.在put的实话先根据key的hashcode重新计算hash值的,而我们又知道hash是一种算法.所以哈希码并不是 ...

  7. LINUX时间服务器搭建

    一. 因 为工作需要,偶需要将搭建一个NTP服务器来进行时间同步的测试,在公司里一直以为非常的难搭建,也是刚刚工作的缘故,就等正导师给帮着弄一台服务器,结 果导师给了我一个系统叫Fedora,让我偶自 ...

  8. [CSP-S模拟测试]:蔬菜（二维莫队）

    题目描述 小$C$在家中开垦了一块菜地,可以抽象成一个$r\times c$大小的矩形区域,菜地的每个位置都种着一种蔬菜.秋天到了,小$C$家的菜地丰收了. 小$C$拟定了$q$种采摘蔬菜的计划,计划 ...

  9. 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础

    - 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础 - 实验任务 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,C ...

  10. Nginx反向代理维基百科镜像制作全解析

    近日做的Ngnx代理测试,基于Nginx的ngx_http_substitutions_filter_module模块,并利用UA跳转实现PC/移动端不同站点跳转. 1. 关于Nginx的代理详细请转 ...