canvas实现手机端用来上传用户头像的代码


Posted in Javascript onOctober 20, 2016

废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
label{
height:40px;
width:100px;
border:1px solid #666;
display:block;
text-align:center;
line-height:40px;
border-radius:10px;
background:lightgreen;
opacity: 1;
}
input{
display:none;
}
span{
display:block;
height:100%;
width:100%;
}
#canvas {
border:1px solid #666;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<label>
<input type="file" id="file" />
<span>上传文件</span>
</label>
<canvas width="300" height="300" id="canvas"></canvas>
</body>
<script>
$("#file").change(function (){
var file = new FileReader();//读取文件2进制
file.onload = function(e){
var base64 = e.target.result;
var img = new Image();//创建一个图片对象
img.onload = function (){
var canvas = $("#canvas").get(0);
var ctx = canvas.getContext("2d");
//使用drawImage显示图片
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
//把base64添加到图片上
img.src = base64;
};
file.readAsDataURL(this.files[0]);
});
</script>
</html>

以上所述是小编给大家介绍的canvas实现手机端用来上传用户头像的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
react-router实现按需加载
May 09 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
JS调用某段SQL语句的方法
Oct 20 #Javascript
Angularjs 设置全局变量的方法总结
Oct 20 #Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 #Javascript
Angular表单验证实例详解
Oct 20 #Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 #Javascript
seajs学习教程之基础篇
Oct 20 #Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 #Javascript
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php调整服务器时间的方法
2015/04/03 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
Vue2实现组件props双向绑定
2016/12/02 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
跟老齐学Python之print详解
2014/09/28 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python正则实现提取电话功能
2018/02/24 Python
ipython和python区别详解
2019/06/26 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
opencv实现图像几何变换
2021/03/24 Python
毕业实习个人鉴定范文
2013/12/10 职场文书
技术合作协议书范本
2014/04/18 职场文书
材料物理专业求职信
2014/09/01 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书