将图片转换为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 ...
随机推荐
- 完美解决ubuntu下sublime中文输入问题
声明 1.本人整理文章,转载请注明出处. 2.参考资料 http://my.oschina.net/tsl0922/blog/113495 问题描述 在ubuntu下想使用sublime,但是不能输入 ...
- [转] golang socket
server.go package main import ( "net" "fmt" "io/ioutil" "time&quo ...
- 机器学习进阶-直方图与傅里叶变化-直方图均衡化 1.cv2.equalizeHist(进行直方图均衡化) 2. cv2.createCLAHA(用于生成自适应均衡化图像)
1. cv2.equalizeHist(img) # 表示进行直方图均衡化 参数说明:img表示输入的图片 2.cv2.createCLAHA(clipLimit=8.0, titleGridSiz ...
- 机器学习入门-文本特征-使用LDA主题模型构造标签 1.LatentDirichletAllocation(LDA用于构建主题模型) 2.LDA.components(输出各个词向量的权重值)
函数说明 1.LDA(n_topics, max_iters, random_state) 用于构建LDA主题模型,将文本分成不同的主题 参数说明:n_topics 表示分为多少个主题, max_i ...
- Delphi 三层TDataSetProvider
在Delphi想使用三层架构或者使用TClientDataSet控件,一般都需要引用TDataSetProvider控件,现对TDataSetProvider控件的Options属性值做一个简单的分析 ...
- Delphi FrieDAC 大数据处理
Delphi FrieDAC 大数据处理 大数据处理, 要用到Array DML 插入数据 先要设置插入的数据量 FQuery1.Params.ArraySize := 1000; for index ...
- 【原创】思科和锐捷组建多VLAN交换网络（隧道模式Trunk）
组建简单交换网络设计与实施 [利用思科仿真与锐捷实践] 本文目录 第一部分 预备知识 第二部分 设计与仿真 需求分析 整体设计 PT仿真 第三部分 施工部署 console配置 连通测试 第一部分 预 ...
- git工作操作步骤
上班开始,打开电脑,git pull:拉取git上最新的代码: 编辑代码,准备提交时,git stash:将自己编辑的代码暂存起来,防止git pull时与库中的代码起冲突,否则自己的代码就白敲了: ...
- 【原】wow64 x86/x64 代码切换过程分析
下面以ntdll32!ZwQueryInformationProcess API为例分析 x86代码与x64代码之间的切换过程, 32bit的test程序: step1: ntdll32!ZwQuer ...
- ArcGIS案例学习笔记-栅格数据分区统计(平均高程，污染浓度，污染总量，降水量)
ArcGIS案例学习笔记-栅格数据分区统计(平均高程,污染浓度,污染总量,降水量) 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:针对栅格数据,利用多边形面要 ...