canvas实现手机端用来上传用户头像的代码
作者:Yokoぃ 发布时间:2023-09-16 02:30:54
标签:canvas,上传头像
废话不多说了直接给大家介绍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实现手机端用来上传用户头像的代码,希望对大家有所帮助
来源:http://www.cnblogs.com/Yoko-815/archive/2016/10/20/5981152.html
0
投稿
猜你喜欢
- MooTools 1.2的整理排序类Sortables原文地址:30 Days of Mootools 1.2 Tutorials - Da
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- 内容适应形式学习了死猫的文章,我今天也来说说有关内容和容器的关系。看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从
- 分享人:轻侯设计师常有这样的疑惑:如何知道用户浏览网页的习惯?如何设计出符合用户使用习惯的网页?如何从搜索引擎带来更多的流量?眼动研究可以帮
- 本文介绍了ORACLE客户端连服务器的注意事项:1. 通过SQL*NET协议,ORACLE客户端连服务器时一般需要配置sqlnet.ora和
- 最近有点审美疲劳,以往看起来觉得漂亮的界面现在觉得很一般,以前觉得看来还行的界面现在觉得很丑了。想来是时候休息一下了。唯美觉得上次做的OA登
- JSP 开发之 releaseSession的实例详解Hibernate可以实现分页查询,昨天试了一下,分页效果不错。但是发现了一个问题,就
- 前言本文主要介绍了关于Python中TCP socket的写法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。一、 服务器
- 樂思蜀将SEO工作中所需要的301转向代码进行了整理,收藏并分享,以备查阅。1、IIS下301设置 Internet信息服务管理器 ->
- 本文介绍了网页运行代码框(runCode), 复制代码框(copyCode), 保存代码框(saveCode),的实现方法。javascri
- 以下的文章主要是介绍SQL Server数据库与其实际应用元数据,我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料,
- 单例模式Singleton Pattern是什么单例模式是一种创建型模式,它保证一个类只有一个实例,并提供一个访问它的全局访问点。单例模式的
- ASP中转换unicode编码为GB编码方法:<% function urldecode(encodestr)
- 感谢人类方方面面的创新,今天Web开发已经不需要在如何设计网站上面浪费时间了。框架和库帮助web开发者得以专注于真正的开发工作上。下面的这些
- 1.在查询分析器理启动或停止SQL Agent服务启动:use mastergoxp_cmdshell 'net start SQL
- 由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致
- 为了庆祝自己的博客重新开放,我在这里放一个自己刚刚写的jquery日期插件, 也许人们会说:日期选取插件已
- 官方说明链接:https://intellij-support.jetbrains.com/hc/en-us/community/posts
- 1.delete不能使自动编号返回为起始值。但是truncate能使自动增长的列的值返回为默认的种子 2.truncate只能一次清空,不能
- 任务详情给定一各地 2016 年 1 月和 2 月各个时间点的温度表格,表格预览见页面下方。数据表的第二列表示当前时间,数据表第一行第三列到