canvas实现手机端用来上传用户头像的代码
废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码，具体代码如下所示：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
label{
height:40px;
width:100px;
border:1pxsolid#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:1pxsolid#666;
}
</style>
<scriptsrc="js/jquery-1.11.3.js"></script>
</head>
<body>
<label>
<inputtype="file"id="file"/>
<span>上传文件</span>
</label>
<canvaswidth="300"height="300"id="canvas"></canvas>
</body>
<script>
$("#file").change(function(){
varfile=newFileReader();//读取文件2进制
file.onload=function(e){
varbase64=e.target.result;
varimg=newImage();//创建一个图片对象
img.onload=function(){
varcanvas=$("#canvas").get(0);
varctx=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实现手机端用来上传用户头像的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！