前端进行图片压缩

Posted Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端进行图片压缩相关的知识，希望对你有一定的参考价值。

无意中看到html5的FileRader这个对象，之前没见过，查阅了下资料发现是个读取文件的东西。于是简单实现了下将图片转换成编码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file"></input>
    <div id="result"></div>

    <script>
        var file = document.getElementById(‘file‘),
            result = document.getElementById(‘result‘);


        file.onchange = function(){
            if(!this.files.length) return;

            var files = Array.prototype.slice.call(this.files);

            if(files.length >= 9){
                alert(‘最多只能上传9张图片‘);
                return;
            }
            
            files.forEach(function(file,i){
                if(!/(jpeg|png|gif|icon)$/i.test(file.type)) return;

                var reader = new FileReader();
                reader.readAsDataURL(file);//将文件读取为DataURL
                reader.onload = function(){
                    var r = this.result;
                    result.innerHTML = r;

                    var img = document.createElement(‘img‘);
                    img.src = r;
                    img.width = 200;
                    img.height = 120;

                    document.body.appendChild(img);
                }

            });
        }

    </script>
</body>
</html>

 

以上是关于前端进行图片压缩的主要内容，如果未能解决你的问题，请参考以下文章

前端图片压缩方案及代码实现

前端通过canvas实现图片压缩

前端实现图片压缩上传

前端JS利用canvas的drawImage()对图片进行压缩

前端进行图片压缩

图片纯前端JS压缩的实现