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 技巧和窍门整理(8个)
Apr 22 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
JavaScript 数组详解
Oct 10 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 七大优势分析
2009/06/23 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Django中url的反向查询的方法
2018/03/14 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
说出一些常用的类,包,接口
2014/09/22 面试题
营销与策划个人求职信
2013/09/22 职场文书
给护士表扬信
2014/01/19 职场文书
商业用房租赁协议书
2014/10/13 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Python Matplotlib绘制动画的代码详解
2022/05/30 Python