css
.con4{width: 230px;height: auto;overflow: hidden;margin: 20px auto;color: #FFFFFF;}
.con4 .btn{width: 100%;height: 45px;line-height: 30px;text-align: center;background: #d8b49c;display: block;font-size: 16px;border-radius: 5px;}
.upload{float: left;position: relative;margin-bottom: 30px;}
.upload_pic{display: block;width: 100%;height: 40px;position: absolute;left: 0;top: 0;opacity: 0;border-radius: 5px;}
#cvs{border: 1px solid #000;margin:20px 0 20px 50px auto;border-radius: 50%;}
HTML
<div class="con4">
<span class="btn upload">上传头像
<input type="file" class="upload_pic" id="upload" />
</span>
<canvas id="cvs" width="100%" height="100%">
</canvas>
</div>
js
var input1 = document.getElementById("upload");
if(typeof FileReader==='undefined'){
input1.setAttribute('disabled','disabled');
}else{
input1.addEventListener('change',function () {
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var image = new Image();
image.src = e.target.result;
var max=200;
image.onload = function(){
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, 200, 200);
};
}
},false);
}