<!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. 警惕黑客利用新方法绕过Office安全链接

    东方联盟黑客安全研究人员透露,一些黑客已经发现绕过MicrosoftOffice365的安全功能,该功能最初旨在保护用户免受恶意软件和网络钓鱼攻击. 被称为安全链接的功能已被包含在Office365软 ...

  2. oracle中分页函数写法

    1.常见的分页查询语句: 查询21到40条之间的数据:SELECT *FROM (select UI.*,ROWNUM RN FROM (select * from user_info) AWHERE ...

  3. head、tail 命令和实时（real-time）更新

    head.tail 命令和实时(real-time)更新 head filename: 输出 filename 文件的前10项 tail filename: 输出 filename 文件的后10项 即 ...

  4. NET Core+win10+Jenkins+Github持续集成

    本篇和上一篇NET Core+win10+Jenkins+Gogs+open ssh持续集成没什么区别,只不过源码库换成github. 这里有两点不一样的是: 获取的代码的凭证不用用户名和密码用sec ...

  5. k8s和docker区别

    简要介绍: docker是一个开源的应用容器引擎,开发者可以打包他们的应用以及依赖到一个容器中,发布到流行的liunx系统上,或者实现虚拟化. k8s是一个开源的容器集群管理系统,可以实现容器集群的自 ...

  6. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  7. 最强CP！阿里云联手支付宝小程序如何助力双11?

    作为首次“全面上云”的双11,阿里云征服了每秒订单峰值54.4万笔的世界新记录.正是在阿里云的保驾护航下,即使访问量是平时的5到6倍,小程序也鲜少出现卡顿或者宕机的现象,“依靠阿里云,我们整个天猫双1 ...

  8. springmvc REST风格的URL

    1:需要配置一个filter <!-- 配置 org.springframework.web.filter.HiddenHttpMethodFilter: 可以把 POST 请求转为 DELET ...

  9. PHP curl_file_create函数

    curl_file_create — 创建一个 CURLFile 对象. 说明 CURLFile curl_file_create ( string $filename [, string $mime ...

  10. 【Java】Java引用maven私服jar包及jar包提交私服问题

    pom.xml中加入以下配置即可 1.引用私服jar包 <!-- 加载的是 第三方项目使用的jar包 --> <repositories> <repository> ...