使用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 ...
随机推荐
- 使用idea搭建SSH
一.新建项目 选中Spring strust2 hibernate 二.见项目根路径下的lib下的jar移动到WEB-INF下 移动 修改路径 在lib目录下导入[c3p0-0.9.5.2.jar]. ...
- 偶遇com组件 .rc 文件 not found .tlb文件问题：
好久木有弄com组件来,记忆已经模糊了,今天遇见一个编译问题,折腾了半天,mark一下: xxx_x64.rc(273): error RC2135: file not found: xxx.tlb ...
- so easy（并查集+unordered_map）
There are nn points in an array with index from 11 to nn, and there are two operations to those poin ...
- activemq高可用
这里是基于 zookeeper 选举方式实现的集群配置,服务器过半数才可提供服务,所以是2n+1台这里以三台为例. 只有master节点能提供服务,slave节点无法提供服务,只有当master节点挂 ...
- css实现缩放自适应网页--手机web
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- switch语句能否作用在byte，long，string上
switch是java中的多分支结构.在switch(expr)中,expr只能是一个整数表达式,或者是枚举常量,整数表达式可以是int基本类型也可以是Integer包装类型,由于byte,short ...
- 新建maven子模块 出现 Unable to read parent POM
新建maven子模块 出现 Unable to read parent POM错误 于是把pom.xml文件中的 中文字符全部删除 包括 注释 最后成功建立
- 026-Cinder服务-->使用NFS作为后端存储
以下将介绍如何使用NFS共享作为Openstack后端存储,本案例在计算节点上配置nfs [root@linux-node2 ~]# yum install -y openstack-cinder p ...
- Granger Causality 格兰杰因果关系
(Granger Causality) 格兰杰(Granger)于 1969 年提出了一种基于“预测”的因果关系(格兰杰因果关系),后经西蒙斯(1972 ,1980)的发展,格兰杰因果检验作为一种 ...
- 做股票软件用的各种k线图
这是各种k线图地址: http://echarts.baidu.com/echarts2/doc/example.html 个人公众号谢谢各位老铁支持 本人qq群也有许多的技术文档,希望可以为你提供一 ...