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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
微信小程序 教程之模板
Oct 18 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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中ini_set与ini_get用法实例
2014/11/04 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Django如何配置mysql数据库
2018/05/04 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
副总经理岗位职责
2014/03/16 职场文书
初三学习计划书范文
2014/04/30 职场文书
股票投资建议书
2014/05/19 职场文书
导游欢迎词范文
2015/01/23 职场文书
新娘婚礼致辞
2015/07/27 职场文书