<!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. 简单使用vuex状态管理

    1.在使用vue-cli脚手架创建项目后 npm install vuex 2.创建store文件夹,结构如下: 3.store中 index.js代码如下: 4.入口文件main.js中引入stor ...

  2. 【C++11新特性】 C++11智能指针之weak_ptr

    如题,我们今天要讲的是C++11引入的三种智能指针中的最后一个:weak_ptr.在学习weak_ptr之前最好对shared_ptr有所了解.如果你还不知道shared_ptr是何物,可以看看我的另 ...

  3. spring-cloud:Hystrix熔断的使用示例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springCl ...

  4. HDU 6055 Regular polygon —— 2017 Multi-University Training 2

    Regular polygon Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  5. 9.28 linux系统基础优化

    关闭SELinux(是美国安全局对强制访问的实现)功能 [root@wen ~]# sed -i 's#SELINUX=enforcing#SELINUX=disabled#g' /etc/selin ...

  6. C++ string.replace的使用

    //下面是一个检查一个字符串中是否有'.'的函数,该函数将找到的'.'转化为'_'. inline void checkName(string& name) { std::; while (s ...

  7. 51nod 1486 大大走格子(容斥+dp+组合数)

    传送门 解题思路 暴力容斥复杂度太高,无法接受,考虑用\(dp\).设\(f(i)\)表示从左上角开始不经过前面的阻断点,只经过\(i\)的阻断点.那么可以考虑容斥,用经过\(i\)的总方案数减去前面 ...

  8. 使用lambda编写九九乘法表

    Java 8 出来有一段时间了,支持lambda表达式 非常的赞. lambda表达式 即匿名方法,属于一种轻量级的封装 lambda表达式的语法由参数列表.箭头符号->和函数体组成.函数体既可 ...

  9. [CSP-S模拟测试]:字符消除2（hash+KMP）

    题目背景 生牛哥终于打通了“字符消除”,可是他又被它的续集难倒了. 题目传送门(内部题52) 输入格式 第一行$n$表示数据组书.接下来每行一个字符串.(只包含大写字母) 输出格式 每组数据输出一个$ ...

  10. 信息安全-攻击-XSRF：XSRF/CSRF 攻击

    ylbtech-信息安全-攻击-XSRF:XSRF/CSRF 攻击 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Ses ...