<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
label {
height: 40px;
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%;
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>