js 实现图片压缩

56 阅读 0 评论 37 点赞

我是靠谱客的博主清爽小蝴蝶，最近开发中收集的这篇文章主要介绍js 实现图片压缩，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js 实现图片压缩

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <input id="file" type="file">
        <img src="" alt="" id="img">
    </body>
    <script type="text/javascript">
        var eleFile = document.querySelector('#file');
        // 压缩图片需要的一些元素和对象
        var reader = new FileReader(),
            //创建一个img对象
            img = new Image();

        // 选择的文件对象
        var file = null;

        // 缩放图片需要的canvas
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // base64地址图片加载完毕后
        img.onload = function() {
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
            var maxWidth = 800,
                maxHeight = 800;
            // var maxWidth = originWidth,
            //  maxHeight = originHeight;
            // // 目标尺寸
            var targetWidth = originWidth,
                targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            // canvas对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
            //压缩后的图片base64 url
            /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
             * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
            var newUrl = canvas.toDataURL('image/jpeg', 0.5); //base64 格式
            //console.log(canvas.toDataURL('image/jpeg', 0.92));
            console.log(newUrl) //压缩过后的base64码
            $('#img').attr('src',newUrl)
        };

        // 文件base64化，以便获知图片原始尺寸
        reader.onload = function(e) {
            img.src = e.target.result;
        };
        eleFile.addEventListener('change', function(event) {
            file = event.target.files[0];
            // 选择的文件是图片
            if (file.type.indexOf("image") == 0) {
                reader.readAsDataURL(file);
            }
        });
    </script>
</html>