使用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 ...
随机推荐
- iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"
原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...
- linux工具之screen
screen官方网址:http://www.gnu.org/software/screen/ 参考文章:http://man.linuxde.net/screen 简介 Screen是一款由GNU计划 ...
- 解决跳转出现 No input file specified.
项目根目录中.htaccess文件修改为: <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On Rewr ...
- pL/Sql插入语句时报错，对表空间没有权限 对表空间 'USERS' 无权限
进入dba为其授予权限:sqlplus sys/admin as sysdba; 为用户授予权限即可 grant unlimited tablespace to username;
- k3 cloud在站点中新增用户
1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...
- socket 服务器向指定的客户端发消息
一.需求 需求如题. 当多个客户端连接服务器时,服务器如何给指定的客户端发送消息. 二.解决方案 核心思想: 在服务器端,需保存不同客户端的socket列表及客户端相关信息. socket含有发送方和 ...
- linux用户管理（useradd、userdel、usermod、groupadd、groupdel、chage、passwd、chpasswd）
一.用户账户配置文件介绍 /etc/passwd 用户账户信息文件/etc/shadow 用户账户密码文件/etc/group 用户组信息文件/etc/gshadow 用户组密码所在文件(基本废弃)/ ...
- 通过关键字Event定义用户自己的事件
Event 语句 定义用户自定义的事件. 语法[Public] Event procedurename [(arglist)] Event 语句包含下面部分: 部分 描述 Public 可选的.指定该 ...
- 将数据转为tfrecord格式
假设emo文件夹下,有1,2,3,4等文件夹,每个文件夹代表一个类别 import tensorflow as tf from PIL import Image from glob import gl ...
- error: undefined reference to `cv::imread(std::string const&, int)'
g++ main.cpp -o main `pkg-config --libs --cflags opencv`注意--libs的位置https://stackoverflow.com/questio ...