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

也可以转换成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. MySQL 5.7 以上版本默认禁止 0000-00-00 的日期

    今天做数据同步,发现一直有报错,集中在时间的默认值.数据源的mysql版本是5.5.30,有些时间字段默认值设置为0000-00-00 00:00:00.目标mysql版本为5.7.17,查资料发现, ...

  2. Navicat Premium 12安装与激活

    https://www.jianshu.com/p/42a33b0dda9c 若使用Navicat Premium 12.1.10.0请转至Navicat Premium 12.1.10.0安装与激活 ...

  3. mycat 分库分表

    单库分表已经在上篇写过了,这次写个分库分表,不同在于配置文件上的一点点不同 <!DOCTYPE mycat:schema SYSTEM "schema.dtd"> &l ...

  4. walle自动部署增量上线

    walle的部署大家都会,全量上线也会,今天突然想用下增量上线,试了好多次都不行,咨询了开发的同事终于明白了,特写个笔记省的忘了 如上图我们网站根目录为/data/ifengsite/htdocs/x ...

  5. redisclient can not connect

    假如采用传统请执行一下命令: systemctl stop firewalld systemctl mask firewalld 并且安装iptables-services: yum install ...

  6. LeetCode OJ 89. Gray Code

    题目 The gray code is a binary numeral system where two successive values differ in only one bit. Give ...

  7. python 深拷贝、浅拷贝、引用

    (1)直接赋值,传递对象的引用而已,原始列表改变,被赋值的b也会做相同的改变(2)copy浅拷贝,没有拷贝子对象,所以原始数据改变,子对象会改变(3)深拷贝,包含对象里面的子对象的拷贝,所以原始对象的 ...

  8. 软件工程github使用小结

    1.在 https://github.com/join 这个网址处申请注册一个Github账号,申请成功后可在https://github.com/login 处利用刚刚注册的账号进行登录,才能开始在 ...

  9. 自定义 mapper的实现

    json格式,要想好看直接百度,json,将字符放进去就可 一步:将mapper复制一份,名字加一个Custom自定义 二步:mpper.xml也是一样,设置里面的namespace映射关系 自定义m ...

  10. Java复习 之多线程

    线程是一个程序中的不同路径 例子1 只有一条路径 每一个分支都是一个线程 实际上在一个时刻内 电脑只能运行一个进程 但是因为cpu运算速度很快 将时间分出来了 所以我们感觉是同时运行 创建线程的两种方 ...