第一种：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>base64</title>
<style type="text/css">

</style>
</head>
<body>
<div>
<input type="file" id="image">
<input type="button" name="" value="点击" onclick='test()'>
</div>

<img src="" id="img1">

<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
</body>
</html>

function test(){

var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var file = $("#image")[0].files[0];
console.log(file)//这里可以查看file的类型和大小等
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面，貌似并没有返回值
imgUrlBase64 = reader.readAsDataURL(file);

reader.onload = function (e) {//读取成功后的回调
console.log(reader)
var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败，请上传不大于2M的图片！');
return;
}else{
//执行上传操作
alert(reader.result);
$("#img1").attr('src',reader.result);
}
}
}

}

第二种：

网站：http://www.jb51.net/article/128554.htm

function getBase64(url){
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
var Img = new Image(),
dataURL='';
Img.src=url;
Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width=Img.width, //确保canvas的尺寸和图片一样
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
};
}

javascript：图片转base64的更多相关文章

  1. JavaScript 图片与Base64数据互相转换脚本

    JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...

  2. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  3. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  4. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  5. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  6. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  7. jquery 图片转为base64

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

随机推荐

  1. Jmeter（三十）Jmeter Question 之 循环+事务的妙用

    先提一个小问题,也是当时在对Jmeter还是懵懂之时,亲身碰到过的一个问题. 真实的业务场景---“登录一次,提交订单N次”,当然该处是两个接口. 提现接口是需要判断用户是否在线,换句话说,服务器需要 ...

  2. postgresql数据库常用操作命令及SQL语言

    (1)登录 peng@peng-virtual-machine:~$ sudo -u postgres psql 以用户postgres身份登录,postgres为用户名,可有多个用户,登录时会要求输 ...

  3. 修改Linux终端提示符颜色

    修改Linux终端提示符颜色 作者:Eric 微信:loveoracle11g [root@linux-node2 ~]# tail -1 .bashrc PS1='[\[\033[1;31m\]\u ...

  4. U3D学习003——编辑器使用

    1.skybox 原来的render setting 在2017版本中是lighting标签environment中设置: 或者在摄像机对象中添加skybox组件,进行设置. 2.6张图实现自定义sk ...

  5. (转).Net高级进阶，在复杂的业务逻辑下，如何以最简练的代码，最直观的编写事务代码？

    原文地址:http://www.cnblogs.com/1996V/p/7798111.html 示例一和示例二,主要是来讲解 TransactionScope 是什么,为什么要用Transactio ...

  6. Spark2.X环境准备、编译部署及运行

    下载地址 :https://www.apache.org/dyn/closer.lua/spark/spark-2.2.0/spark-2.2.0.tgz 我们把spark放在节点2上 解压 下面我们 ...

  7. Django中的跨表查询，多表查询。

    一:Django中的ORM进行操作. 必须掌握的十三条: <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 & ...

  8. 使用原子类或synchronized（没用Lock）解决阐述多线程所遇到线程安全问题和解决方案

    例子题目: 创建10个线程,每个线程执行10000次加1,输出总和 正常结果100000  但是如果出现线程不安全会低于100000 import java.util.concurrent.Count ...

  9. QSetting 说明和简单使用

    今天看到服务端代码有一个QSetting.一开始以为是STL模板中的Set(弄到QT中改了个名字而已).仔细一看吓一跳,不是STL模板.是qt特有的一个类. 用来保存或读取一些配置信息用的.看了后,感 ...

  10. 【Jmeter自学】Jmeter里的指标

    聚合报告 Average:平均响应时间(毫秒ms) Median:中值时间,N个数据从小到大排列,第N/2个数 9x%Line:N个数据从小到大排列,第9x%N个数.所有数据中9x%的响应时间都小于9 ...