<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片预览</title>
<script>
function tobin(target){
var url = window.URL.createObjectURL(target.files.item(0));
var img = new Image();
img.src = url;
var Image= document.getElementById('you');
var can = document.createElement('canvas');
var context = can.getContext('2d');
img.onload = function(){
var nw = img.naturalWidth;
var nh = img.naturalHeight;
can.setAttribute('width', nw+'px');
can.setAttribute('height', nh+'px');
context.drawImage(img,0,0,nw,nh);
//二进制流
var bin = can.toDataURL('image/jpeg');
Image.src = bin;
}
}
</script>
</head>
<body>
<input type="file" onchange="tobin(this)">
<hr>
<img src="" alt="图片" width="320px" id="you">
</body>
</html>
