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 相关文章推荐
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
Vue.js学习示例分享
Feb 05 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue实现输入框自动跳转功能
May 20 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
理解javascript正则表达式
2016/03/08 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python numpy 常用函数总结
2017/12/07 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python input函数使用实例解析
2019/11/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
Jar包的作用是什么
2014/03/30 面试题
C#软件工程师英语面试题
2015/06/07 面试题
2013的个人自我评价
2013/12/26 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
公司晚会主持词
2014/03/22 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
高中校园广播稿
2014/10/21 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers