<!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. 前端每日实战：72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

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

  2. LOJ149 0/1分数规划

    竟然没有写过分数规划的题解 考前挣扎一发板子( 二分答案k 然后0/1分数规划的方法就是 分母乘过去然后贪心解决 注意实数二分的精度 一般估计一个次数比较好不然容易出现精度比较误差[惨痛教训 就做完了 ...

  3. springmvc中拦截器配置格式

    对于springmvc,有两种方式配置拦截器. 一是实现HandlerInterceptor接口,如 public class MyInterceptor1 implements HandlerInt ...

  4. Autodesk Maya 2019 for Mac(三维动画软件)最新功能介绍

    Autodesk Maya是美国Autodesk公司出品的世界顶级的三维动画软件,应用对象是专业的影视广告,角色动画,电影特技等.Maya功能完善,工作灵活,易学易用,制作效率极高,渲染真实感极强,是 ...

  5. CF 39E. What Has Dirichlet Got to Do with That?(记忆化搜索+博弈论)

    传送门 解题思路 首先很好写出一个\(O(ab)\)的记搜,但发现这样无法处理\(a=1\)和\(b=1\)的情况,这两种情况需要特判.首先\(a=1\)的情况,就是如果当前选手让\(a+1\)必胜, ...

  6. Buuctf | sqli-labs

    这个是赵师傅给我们提供的训练靶场,最好都打一遍,但是出于找flag的角度,特此记录一下,flag在哪里[没错,我就是喜欢我的蓝变红,哈] ?id=1' :报错,说明就是用这个闭合的 ?id=0' un ...

  7. [HDU2294]Pendant

    题目:Pendant 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2294 分析: 1)f[i][j]表示长度为i,有j种珍珠的吊坠的数目. $f[i][ ...

  8. （转）堆和栈的概念和区别 HeapOutOfMemory和StackOverflow解释

    转:https://blog.csdn.net/pt666/article/details/70876410 https://blog.csdn.net/guohan_solft/article/de ...

  9. tp5怎么验证手机号码

    直接上干货

  10. iText例子

    参考:http://itextpdf.com/book/examples.php daniel@daniel-mint ~/latex/linux/itext/daniel $ cat HelloWo ...