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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
es6函数之箭头函数用法实例详解
Apr 25 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,js双版本
2012/09/25 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php的sso单点登录实现方法
2015/01/08 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
原生js生成图片验证码
2020/10/11 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
木马的传播途径主要有哪些
2016/04/08 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
积极分子思想汇报
2014/01/04 职场文书
五型班组建设方案
2014/02/10 职场文书
婚假请假条怎么写
2014/04/10 职场文书
市场营销战略计划书
2014/05/06 职场文书
单位绩效考核方案
2014/05/11 职场文书
篮球赛口号
2014/06/18 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
导游词之天下银坑景区
2019/11/21 职场文书