使用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 ...
随机推荐
- python3—廖雪峰之练习（二）
函数的参数练习 请定义一个函数quadratic(a, b, c), 接收3个参数,返回一元二次方程 : $ ax^2+b+c=0 $ 的两个解 提示:计算平方根可以调用math.sqrt()函数: ...
- Y7000 安装ubuntu16.04.6 的tips :禁用nouveau 、Wifi 问题 、nvidia 驱动安装
由于最近要跑DeepLearning 所以在自己的Y7000上装一个Ubuntu ,自己碰了好多壁 写下来以防止自己忘掉以便后续再用! 配置:i7-8750H +GeForce GTX 1050Ti ...
- codeforces 597 div 2
A 题意: 有无限个方块,上面分别是0,1,2......若方块i可以被表示为ax+by(x,y>0),则方块为白色,否则为黑色,给出a,b.问黑方块是否有无限个. 分析: 1:若(a,b)=1 ...
- linux-memcache安装及memcached memcache扩展
linux memcached安装yum -y install libevent libevent-deve yum list memcached yum -y install memcached m ...
- php批量POST修改
这是一个thinkphp中的批量修改的案例: 如需要删除多项,或者同时修改多项记录 要点: 前端表单中name要加[],如:<input type="hidden" name ...
- pathlib模块替代os.path
pathlib模块替代os.path 在Python 3.4之前和路径相关操作函数都放在os模块里面,尤其是os.path这个子模块,可以说os.path模块非常常用.而在Python 3.4,标准库 ...
- 分布式理论： CAP、BASE （转）
分布式系统的CAP理论是由Eric Brewer于1999年首先提出的,又被称作布鲁尔定理(Brewer's theorem),CAP是对Consistency(一致性).Availability(可 ...
- MySql+EF+CodeFirst
ef+mssql详细是许多.net程序员的标配.作为一个程序员当然不能只会mssql这一个数据库,今天简单聊聊ef+mysql.推荐新人阅读. 1]首先创建一个mvc项目,如图: 创建完毕之后再nug ...
- JavaScript的循环结构和经典题目
一.JS中的循环结构 循环结构的执行步骤1.声明循环变量:2.判断循环条件;3.执行循环体操作:4.更新循环变量:5.然后循环执行2-4,直到条件不成立,跳出循环. while循环()中的表达式,运算 ...
- 如何编写testbench的总结（非常实用的总结）
1．激励的设置 相应于被测试模块的输入激励设置为reg型,输出相应设置为wire类型,双向端口inout在测试中需要进行处理. 方法1:为双向端口设置中间变量inout_reg作为该inout的输出寄 ...