使用JS将图片转为Base64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 图片转Base64</title>
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
function run(input_file, get_data) {
/*input_file：文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if (typeof (FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
} else {
try {
/*图片转Base64 核心代码*/
var file = input_file.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function () {
get_data(this.result);
}
reader.readAsDataURL(file);
} catch (e) {
alert('图片转Base64出错啦！' + e.toString())
}
}
} $(function () {
$("#select_img").change(function () {
run(this, function (data) {
$('#test_img').attr('src', data);
$('#base64_str').html(data);
});
});
});
</script>
</head>
<body>
<input type="file" id="select_img" accept=".png,.jpg,.jpeg,.gif,.bmp">
<hr>
<img style="max-height: 300px; max-width:300px;" id="test_img">
<hr>
<p id="base64_str"></p>
</body>
</html>
via：https://www.cnblogs.com/wujingtao/p/5196836.html
使用JS将图片转为Base64的更多相关文章
- js将图片转为base64编码，以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- [转]JS将图片转为base64编码
本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...
- JS将图片转为base64
var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...
- canvas将图片转为base64
最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- 011_如何decode url及图片转为base64文本编码总结
一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...
- html5 图片转为base64格式异步上传
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
- jquery 图片转为base64
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- js 选择图片生成base64数据
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- linux安装五笔拼音混输 的五笔输入法
打开终端先卸载系统的iBus sudo apt-get remove ibus 添加源sudo add-apt-repository ppa:fcitx-team/nightlysudo apt-ge ...
- C语言黑与白问题
问题描述: 有A.B.C.D.E这5个人,每个人额头上都帖了一张黑或白的纸.5人对坐,每 个人都可以看到其他人额头上纸的颜色.5人相互观察后: A说:“我看见有3人额头上贴的是白纸,1人额头上贴的是黑 ...
- Luogu P1864 [NOI2009]二叉查找树
题目 \(v\)表示权值,\(F\)表示频率. 首先我们显然可以把这个权值离散化. 然后我们想一下,这个东西它是一棵树对吧,但是我们改变权值会引起其树形态的改变,这样很不好做,所以我们考虑把它转化为序 ...
- Codeforces Round #503 (by SIS, Div. 2) E. Sergey's problem
E. Sergey's problem [题目描述] 给出一个n个点m条边的有向图,需要找到一个集合使得1.集合中的各点之间无无边相连2.集合外的点到集合内的点的最小距离小于等于2. [算法] 官方题 ...
- spring.jar是包含有完整发布的单个jar 包，spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容，因为只有在开发环境下才会用到 spring-mock.jar来进行辅助测试，正式应用系统中是用不得这些类的。
Spring jar包的描述:针对3.2.2以上版本 org.springframework spring-aop ——Spring的面向切面编程,提供AOP(面向切面编程)实现 org.spring ...
- MySQL索引优化（索引单表优化案例）
1.单表查询优化 建表SQL CREATE TABLE IF NOT EXISTS `article` ( `id` INT(10) UNSIGNED NOT NULL PRIMARY KEY AUT ...
- Spring基础12——使用外部属性文件
1.使用外部属性文件 在配置文件里配置Bean时,有时需要在Bean的配置文件里引入系统部署的细节信息(例如:文件的路径.数据源配置信息等),而这些部署细节实际上需要和bean配置相分离,因为我们修改 ...
- Apache 的 httpd.conf 配置文件
http.conf 是 Apache 的配置文件,Apache 的常见配置主要是通过修该文件实现的,修改之后需要 重启 Apache 服务生效. Httpd.conf #Apache 安装目录 Ser ...
- PAT Basic 1010 一元多项式求导 (25 分)（活用stringstream，昨天学习的）
设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为nxn−1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过 1000 的整数).数字间以空格分隔. ...
- Ansible笔记（2）--配置清单
一.Ansible Inventory配置及详解 Inventory是ansible管理主机信息的配置文件,默认存放在/etc/ansible/hosts.在使用时通过 -i 或 --inventor ...