您的位置：首页 > 移动开发

手机端用来上传用户头像的代码canvas

2016-10-20 23:12 211 查看 
<!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 type="text/javascript" src="js/jquery-3.1.1.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>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航