使用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 ...
随机推荐
- uboot初识
一. 什么是uboot 1.1. uboot的由来 1.1.1. uboot是SourceForge上的开源项目 1.1.2. uboot就是由一个人发起,然后由整个网络上所有感兴趣的人共同维护发展而 ...
- P1168 中位数 堆
题目描述 给出一个长度为NN的非负整数序列A_iAi,对于所有1 ≤ k ≤ (N + 1) / 21≤k≤(N+1)/2,输出A_1, A_3, …, A_{2k - 1}A1,A3,…,A2 ...
- 微信JSSdk实现分享功能
1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务.为实现二次分享功能需要使用微信JS-SDK来开发. 微信JS-SDK是微信公众平 ...
- Java——BufferedImage操作实例
通过鼠标位置改变图像ColorModel对象索引,从而实现图像像素自动变化 BufferedImage 由图像数据的 ColorModel 和 Raster 组成.Raster 的 SampleMod ...
- MFC- socket 编程
一.CAsyncSocket类 CAsyncSocket属于异步非阻塞类. CAsyncSocket类采用了windows socket中的WSAAsyncSelect模型.CAsyncSocket ...
- 毛玻璃效果 css
毛玻璃效果 <style> .container{ width: 287px; height: 285px; background-image: url(img/background.pn ...
- Docker守护式容器的创建和登录
创建守护式容器 如果对于一个需要长期运行的容器来说,我们可以创建一个守护式容器(后台运行的容器). 创建(-d)并运行(-i)守护式容器命令如下(容器名称不能重复): docker run -id - ...
- 新手使用GIT 上传文件到github
手把手教你如何使用 Git # 初始化一个新的Git仓库 1.方式一: mkdir(make directory) test或者直接进入文件夹中再打开git 方式二:cd /文件夹 cd(change ...
- 15.Linux-CentOS系统重启网卡ping不通问题（云环境）
问题: CentOS系统网络不通,重启网卡后能ping通,等一会就又不通. 解决: 在云环境管理平台下,KVM系统的MAC地址,使其重新生成一下.
- Flutter-使用Dialog時出現No MaterialLocalizations found
在显示SimpleDialog时候程序报错 No MaterialLocalizations found 没有找到 MaterialLocalizations 搜索找到原因 runApp 需要先调用 ...