将图片转换为Base64编码的字符串
图片以文件的形式存在，可以在表单中使用。
也可以转换成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编码的字符串的更多相关文章
- C#中图片转换为Base64编码，Base64编码转换为图片
#region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = ...
- JAVA 将图片转换为Base64编码
这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...
- nodejs抓取网络图片转换为base64编码的图片
抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...
- base64编码的字符串与图片相互转换
#region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...
- 用javascript实现base64编码器以及图片的base64编码
前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...
- JavaScript—图片与base64编码互相转换
图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...
- Javascript 将图片的绝对路径转换为base64编码
Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...
- C# 在网页中将Base64编码的字符串显示成图片
在写一个接口,返回的json里面有图片,是Base64编码的字符串. 测试接口的时候,发现原来在html显示,是直接可以将Base64编码的字符串显示成图片的. 格式如下: <img src=d ...
随机推荐
- https://www.52pojie.cn/thread-688820-1-1.html
https://www.52pojie.cn/thread-688820-1-1.html
- as2 删除层级影片问题
关键要将main的引用赋值,防止被误删,导致加载swf空白 /** * 删除所有对象 * @param standByRemoveMc 影片对象 * @param removeSelf 是否删除自身 ...
- 尚硅谷redis学习1-NOSQL简介
本系列是自己学习尚硅谷redis视频的记录,防止遗忘,供以后用到时快速回忆起来,照抄视频和资料而已,没什么技术含量,仅给自己入门了解,我是对着视频看一遍再写的,视频地址如下:尚硅谷Redis视频 背景 ...
- Linux：简单的并发服务器实现
我前两天实现了一个简单的服务器和一个对应的客户端,也简单的解决了一些错误检查和常用的函数的封装,但是那个服务器的一次只能连接一个客户端,鸡肋,太鸡肋了,今天我来实现可以连接多个客户端的服务器实例:多进 ...
- 转: 日期格式参考extjs api文档中的Date类型
var md = new Ext.form.DateField({ //下面的格式是:2000-01-01 00:00:00 format: 'Y-m-d H:i:s', ............ } ...
- 四则运算3+PSP
题目要求: 1.要求在第二次实验(四则运算2)的基础上加上其他功能. 2.要求能够在每个运算式打印出来后,用户能够进行输入计算的答案,并且程序进行判断给出用户输入的答案的正确性. 3.要求实现四则混合 ...
- 一秒去除Win7快捷方式箭头
我相信有无数的小盆友跟我一样很讨厌Win7快捷方式图标上的箭头,实在太丑陋了,尤其是带有强迫症滴.现在介绍去除箭头的方式. 1. 打开编辑器,将以下代码粘贴进去,然后保存为.bat后缀的文件,然后双击 ...
- 一个漂亮的 PlaceHolder
预览: 不知道为什么下面这个窗口中的 JavaScript 代码没有运行-_-||,想看实际效果就把下面的代码保存下来打开看吧. 代码: <!DOCTYPE HTML> <html ...
- swift杂记
1.0 数据类型强转 范围小 --->范围大 不会丢失精度 : 范围大 ---> 范围小 ,可能丢失精度 如 :Int(4.2) = 4 :CGFloat(2) = 2.0 2. ...
- hibernate 工作原理及为什么要用