<!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. 非阻塞套接字与IO多路复用(转,python实现版)

    非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...

  2. 前端每日实战：76# 视频演示如何用纯 CSS 创作一组单元素办公用品（内含2个视频）

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMgmwB 可交互视频 此视频是可 ...

  3. boost tuple

    boost::tuple is a generalized version of std::pair. While std::pair can only store exactly two value ...

  4. Makefile中的$@ $< $^的意义

    $@  目标文件 $<   第一个依赖文件 $^  所有的依赖文件 $? 比目标还要新的依赖文件列表 $%  仅当目标是函数库文件中,表示规则中的目标成员名 $+  所有依赖目标的集合,与$^类 ...

  5. .NET Core 使用 nlog 进行日志记录

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  6. VMware linux 克隆机的配置

    从另一台虚拟机克隆完后的一些配置 编辑eth0的配置文件: [root@wen data01:4]# vim /etc/sysconfig/network-scripts/ifcfg-eth0 删除 ...

  7. paper 155：face/head pose estimation

    参考来源:http://www.cnblogs.com/lanye/p/5312620.html 人脸姿态估计:pitch,yaw,roll三种角度,分别代表上下翻转,左右翻转,平面内旋转的角度.   ...

  8. Windows Server服务器之用户界面，任务管理器等

    用户界面简化服务器管理.跟Windows 8一样,重新设计了服务器管理器,采用了Metro界面(核心模式除外).在这个Windows系统中,PowerShell已经有超过2300条命令开关(Windo ...

  9. vue项目打包之后原本好的样式变得不好了的原因分析

    这个主要是打包的过程将所有的css文件进行归类压缩,导致原先其他文件里的样式对当前的产生了影响,应该有同样的类名了.怎么改?要么改类名,要么用scope,scss的写法.

  10. （转）docker-compose安装

    转:https://blog.csdn.net/pushiqiang/article/details/78682323 https://blog.csdn.net/ericnany/article/d ...