小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[代码]图片html5在线压缩
  • 首页 > 前端
  • 作者:小昱
  • 2017年8月7日 10:48 星期一
  • 浏览:114
  • 字号:
  • 评论:0
  •  
    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>图片html5在线压缩</title>
        <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
        <style>
        input {
            margin: 10px 0;
        }
    
        textarea {
            width: 100%;
            height: 300px;
            display: none;
        }
        </style>
    </head>
    
    <body>
        <input type="file" value="image" id="img_input">
        <textarea id="result"></textarea>
        <p id="img_area"></p>
        <script>
        window.onload = function() {
            var input = document.getElementById("img_input");
            var result = document.getElementById("result");
            var img_area = document.getElementById("img_area");
            if (typeof(FileReader) === 'undefined') {
                result.innerHTML = "FileReader is not supported...";
                input.setAttribute('disabled', 'disabled');
            } else {
                input.addEventListener('change', readFile, false);
            }
        };
    
        function readFile() {
            // this 为 input
            // this.files 为 FileList
            var file = this.files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert("image only please.");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var img = new Image,
                    width = 200, //image resize
                    quality = 0.8, //image quality
                    canvas = document.createElement("canvas"),
                    drawer = canvas.getContext("2d");
                // this 为 FileReader
                img.src = this.result;
                img.onload = function() {
                    canvas.width = width;
                    canvas.height = width * (img.height / img.width);
                    drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
                    img.src = canvas.toDataURL("image/jpeg", quality);
                    // console.log(img.src);
                    result.innerHTML = '<img src="' + img.src + '" alt=""/>';
                    img_area.innerHTML = '<div class="sitetip">preview:</div><img src="' + img.src + '" alt=""/>';
                }
            }
        }
        </script>
    </body>
    
    </html>
    

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [代码]图片html5在线压缩
    本文地址:http://www.xiaoyulive.top/?post=112
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号