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

也可以转换成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. ssh-keygen生成git ssh密钥

    title: ssh-keygen生成git ssh密钥 date: 2018-05-07 08:49:21 tags: [git,ssh-keygen] --- ssh-keygen生成git ss ...

  2. delphi android 自动升级

    用IdHTTP1下载文件到手机完成. 调用自动安装不行. First chance exception at $DFC22519. Exception class EJNIException with ...

  3. 清除linux服务器缓存 clean.sh

    #!/bin/sh#根据输入参数创建后台进程的日志名称#FileName: createNohupPhpForbak.sh #export JAVA_HOME=/root/lib/jdk1.7.0_7 ...

  4. python 叠加装饰器详解

    def out1(func1): #7.func1=in2的内存地址,就是in2 print('out1') def in1(): #8.调用函数index() 因为函数在in1里,所以首先运行in1 ...

  5. 8张思维导图学习javascript

    分别归类为: javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascr ...

  6. (转).NET Core 使用 log4net

    https://blog.csdn.net/liyazhen2011/article/details/83382221 1.安装log4net     建立.NET Core工程 - 右键 - 管理N ...

  7. 基于ceph快照快速回滚openstack上的虚拟机

    查看虚拟机ID 1 2 [root@node1 ~]# nova list --all | grep wyl | dc828fed-1c4f-4e5d-ae84-795a0e71eecc | wyl ...

  8. SQL Server 事件探查器和数据库引擎优化顾问

    简介 说到Sql的[性能工具]真是强大,SQL Server Profiler的中文意思是SQL Server事件探查,这个到底是做什么用的呢?我们都知道探查的意思大多是和监视有关,其实这个SQL S ...

  9. Object.keys(obj)--获取对象属性，该方法返回一个数组

    find: function(id){ var self = this; var _id = parseInt(id, 10), id = ''; Object.keys(self.data).for ...

  10. cgi调用linux系统命令

    1.例如:建一个目录:system("mkdir yourdir").(1)首先:要用root用户如果cgi中要用root用户,则必须在boa.conf文件中配置,将User no ...