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

也可以转换成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. web API的概念

    11月20日 纷乱的术语 接口:从接口测试说起,接口是某个对象和外界交互的部分,应用程序可能有很多接口. 用户界面UI(user interface) 消息交互接口,外界是其他程序:diameter, ...

  2. APP-4-百度地图定位

    APP-3-百度地图应用 需要根据上一步完成百度地图应用的测试,本文介绍Hbuilder通过MUI框架完成百度地图的定位. 1.代码部分 <!DOCTYPE html> <html& ...

  3. eclipse中导入java类失败的问题

    在 Eclips 开发时,新建了一个 Dynamic Web Project,在运行jsp文件时tomcat报错: org.apache.jasper.JasperException: Unable ...

  4. Linux命令:chown

    Linux命令:chmod https://baijiahao.baidu.com/s?id=1616750933810368135&wfr=spider&for=pc chmod - ...

  5. docker仓库harbor搭建随笔

    docker除了自己的registry仓库工具外,还有vmware出品的harbor,harbor集成了ui界面,用户级别认证,重要的是对镜像管理比较全面,可以删除镜像,下面是 简单的部署指南 首先: ...

  6. [jPlayer]一分钟部署jPlayer

    ---------------------------------------------------------------------------------------------------- ...

  7. Android Studio 打包时 Signature Version 选择V1还是V2 ？

    只勾选V2会导致 7.0 以下的安卓机出现 INSTALL_PARSE_FAILED_NO_CERTIFICATES 的问题 ,推荐全选. 解决方案一v1和v2的签名使用1)只勾选v1签名并不会影响什 ...

  8. eclipse中配置Tomcat服务器以及新建项目

    eclipse配置Tomcat服务器 http://jingyan.baidu.com/article/ca2d939dd90183eb6d31ce79.html eclipse中配置Tomcat服务 ...

  9. 16.Set、List、Queue集合；Map.md

    目录 1.Set 1.2HashSet TreeSet 2.List 2.1ArrayList 2.1.1ArrayList和Vector的区别 2.2LinkedList 3.Queue 4.各种线 ...

  10. week06 07 创建RPC SERVER 换个镜像安装下载

    RPC server 使用python类库 https://pypi.org/project/python-jsonrpc/ 和NPM 不一样 他没有global选项 他安装的就是全局的安装的类库叫p ...