<!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. Jmeter —— Test Fragment （测试片段）

    Test Fragment(测试片段) 1.    概念 JMeter中的Test Fragent:是控制器上一种特殊的线程组:它在测试树上与线程组处于同一个层级.但是使用的时候需要和Include ...

  2. gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9 ...

  3. Kettle数据同步速度调优记录

    Msyql到Vertica 1.mysql中在openshop 数据库中选择其中一个300W左右数据的表 create table ip_records_tmp_01 AS SELECT * FROM ...

  4. idea 离线安装 lombok插件

    Lombok简介 Lombok是Java语言的实用工具,确切的说,应该说是一个很好用的插件,对,插件!可以用来帮助开发人员消除Java代码的冗长,尤其是对于简单的Java对象(POJO),它通过注解实 ...

  5. 【LeetCode 96】不同的二叉搜索树

    题目链接 [题解] 我们可以枚举这棵树的根节点在i处. 现在问题就变成. 1..i-1这i-1个节点组成的树和i+1..n这n-i个节点组成的树的个数的问题了. 假设他们俩的结果分别是cnt1和cnt ...

  6. 安装windows10和fedora23双系统的一些注意事项

    在安装双系统windows10和fedora的过程中遇到了很多的问题,博主也是在慢慢的摸索中最后莫名其妙的成功的安装双系统. 当然,幸亏博主机智的记住了中间的一些细节,所以大致上的有一些注意事项希望能 ...

  7. APIO2019 练习赛 Wedding cake——思路+高精度

    题目大意: 给 n ( n<=1e5 ) 个数 \( a_i \) (\( a_i \) <=1e5),需要构造 n 个实数使得它们的和是 1 ,并且第 i 个实数必须小数点后恰好有 \( ...

  8. LOJ 2997 「THUSCH 2017」巧克力——思路+随机化+斯坦纳树

    题目:https://loj.ac/problem/2977 想到斯坦纳树.但以为只能做 “包含一些点” 而不是 “包含一些颜色” .而且不太会处理中位数. 其实 “包含一些颜色” 用斯坦纳树做也和普 ...

  9. ArrayList和Map的一些知识

    2014年10月17日16:39:01 1.如何获取某条数据在ArrayList中的索引值? 多个对象存储的ArrayList中,如果只知道对象其中的一个属性,如何获取该对象在ArrayList里的索 ...

  10. iview+vue 使用中遇到的问题（表格、select、radio）

    1.iview+vue中,对表头的动态设置: iview表头若是需要动态设置,可以有两个方法,第一种: children: [ { title: '2017年', align: 'center', k ...