图片以文件的形式存在，可以在表单中使用。

也可以转换成Base64编码的字符串，从而在css、js中以字符串的形式使用图片。例如，在css中设置背景图片、在js中用ajax上传图片。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<body>

    <h2>图片转Base64</h2>

    <input type="file" id="uploadFile" onchange="getDataUrl(event);"/>

    <img id="myImg" width="16" height="16"/>

    <script>

        let getDataUrl = (e)=>{

            // 获取图片

            let file = document.getElementById('uploadFile').files[0];

            // 检测图片

            if(!/image\/w+/.test(file.type)){

                alert('请上传图片');

                return;

            }

            // 转换图片

            let fileReader = new FileReader();

            fileReader.onload = ()=>{

                console.log(fileReader.result);

                document.querySelector('#myImg').src = fileReader.result;

            }

            fileReader.readAsDataURL();

        }

    </script>

</body>

</html>

各种图片在线转换Base64的网站，就是使用这种方法来转换jpg、png、ico等图片。

将图片转换为Base64编码的字符串的更多相关文章

  1. C#中图片转换为Base64编码，Base64编码转换为图片

    #region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = ...

  2. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  3. nodejs抓取网络图片转换为base64编码的图片

    抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...

  4. base64编码的字符串与图片相互转换

    #region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...

  5. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  6. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  7. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

  8. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  9. C# 在网页中将Base64编码的字符串显示成图片

    在写一个接口,返回的json里面有图片,是Base64编码的字符串. 测试接口的时候,发现原来在html显示,是直接可以将Base64编码的字符串显示成图片的. 格式如下: <img src=d ...

随机推荐

  1. webstorm上svn的安装使用

    1.首先要下载SlikSvn网址为:https://sliksvn.com/download/  进入该网站可以根据需要下载32位的或者64位的svn.下图为要下载的图标样式 点击下载即可. 2.在w ...

  2. AS3 - 对文件和目录的操作

    1,写入到文件 1 2 3 4 5 var fileObj:File = File.documentsDirectory.resolvePath("hangge.txt"); va ...

  3. Firebird日期时间操作

    最近在使用Firebird数据做 一项目,使用FireBird边用边学.(以下转贴) 查询2007年度以后的,12月份以上的数据记录,datetime为timestamp字段 select * fro ...

  4. ETC2 区别于ETC的重要点

    ETC2 主要是对于NPOT却是4的倍数的贴图有较大压缩,比如一个1920X1080RGB的Loading图,ETC4压缩下不管用,大小5.9M,ETC2下压缩为1M

  5. 30.深入理解abstract class和interface

  6. Java学习06 (第一遍) - JSP与Servlet

    EL(Expression Language) <% User user=(User)session.getAttribute("user"); Dept dept=user ...

  7. hibernate中的sql 1+n 问题

    ( 产生的原因:当一对多或多对多的映射关系下,当在一方添加或修改数据时,一方集合属性中的多方都要发生变化;先select语句,再update语句.当一方集合属性中的数据有很多时,对应的update语句 ...

  8. Android 抓取LOG的几种命令【转】

    通常调试时候需要抓取log信息,下面几种通过ADB命令来抓取log的方法: USB连接上手机,手机需要其他操作:然后运行ADB工具:输入不同的命令即可抓取对应的LOG信息. 抓取radio LOG信息 ...

  9. 吴裕雄 python 机器学习-NBYS（1）

    import numpy as np def loadDataSet(): postingList=[['my', 'dog', 'has', 'flea', 'problems', 'help', ...

  10. 吴裕雄 19-Mysql 连接的使用

    JOIN 按照功能大致分为如下三类:INNER JOIN(内连接,或等值连接):获取两个表中字段匹配关系的记录.LEFT JOIN(左连接):获取左表所有记录,即使右表没有对应匹配的记录.RIGHT ...