压缩上传图片

浏览数:1,168
2019-1-7
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="" alt=""  id="img1"/>
<input class="hide_input" type="file" name="imageFiles" id="img" onchange="showimg(this,'#img1')"/>

<script src="jquery-2.0.0.min.js"></script>
<script>

    function showimg(inputId,imgId) {
        var file =inputId.files[0];//获取input file控件选择的文件
        ImgToBase64(file, 450, function (base64) {
            $(imgId)[0].src = base64;//预览页面上预留一个img元素，载入base64
        });
    }
    function ImgToBase64(file, maxLen, callBack) {
        var img = new Image();

        var reader = new FileReader();//读取客户端上的文件
        reader.onload = function () {
            var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
            img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
        };
        img.onload = function () {
            //生成比例
            var width = img.width, height = img.height;
            //计算缩放比例
            var rate = 1;
            if (width >= height) {
                if (width > maxLen) {
                    rate = maxLen / width;
                }
            } else {
                if (height > maxLen) {
                    rate = maxLen / height;
                }
            };
            img.width = width * rate;
            img.height = height * rate;
            //生成canvas
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var base64 = canvas.toDataURL('image/jpeg', 0.9);
            callBack(base64);
        };
        reader.readAsDataURL(file);
    }
</script>
</body>
</html>
喜欢 0
压缩上传图片

相关推荐
