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

也可以转换成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. es6初级之解构----之二 及 键值反转实现

    1.解构: 不定参数,扩展表达式 let arr = [100, 201, 303, 911]; let [one, ...others] = arr; console.log(others.leng ...

  2. PRC远程过程调用

    RPC(Remote Promote Call) 一种进程间通信方式.允许像调用本地服务一样调用远程服务. RPC框架的主要目标就是让远程服务调用更简单.透明.RPC框架负责屏蔽底层的传输方式(TCP ...

  3. 1test

    Tencent's outsize influence in China's online world is ballast that should steady it as it targets b ...

  4. avalon1与avalon2的异同点

    avalon2并不向下兼容avalon1,但许多API与指令很相似,迁移成本比较低.此外,良好的性能与强大的功能是你迁移的动力.下面是一个列表,如有提问尽管提出. avalon1与avalon2的异同 ...

  5. vue项目分辨率

    vue项目分辨率写在这里:

  6. centos FTP 用户指定目录禁用上级目录

    在默认配置下,本地用户登入FTP后可以使用cd命令切换到其他目录,这样会对系统带来安全隐患.可以通过以下三条配置文件来控制用户切换目录.chroot_list_enable=YES/NO(NO)设置是 ...

  7. Java 中 == 和 equals 的区别

    有一段时间,== 和 equals 的区别一直困扰着我.因为涉及到Java的内存机制,然而Java的内存机制又是比较抽象的东西,所以对那时候的我来说,实在是很难理解. == 和 equals 最大的区 ...

  8. for嵌套

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. /src/struts.xml

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC         ...

  10. jquery滚动条平滑滑动

    采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 滚动到顶部:   $(' ...