图片预览

<!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>

 

转载于:https://www.cnblogs.com/webPang/p/10345942.html