用户头像上传php代码,canvas实现手机端用来上传用户头像的代码

废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码，具体代码如下所示：

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;

}

上传文件

$("#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]);

});

本文原创发布php中文网，转载请注明出处，感谢您的尊重！