前端上传图片时进行压缩

　　

　　前端上传图片时，对图片大小进行判断。如果上传的图片大于1M，则进行压缩后再上传。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片压缩</title>
    <script>

        function submitPic() {
            var fileObj = document.getElementById('file').files[0];
            var form = new FormData();

            //上传图片大于1M进行压缩
            if(fileObj.size/1024 > 1025){
                photoCompress(fileObj,{
                    quality: 0.2
                },function (base64Codes) {
                    var bl = convertBase64UrlToBlob(base64Codes);
                    form.append("file", bl); // 文件对象
                    //上传
                    $.ajax({})
                })
            }else{
                form.append("file", fileObj);
                //上传
                $.ajax({})
            }
        }

        /**
         * @param file: 上传的图片
         * @param objCompressed：压缩后的图片规格
         * @param objDiv：容器或回调函数
         */
        function photoCompress(file, objCompressed, objDiv){
            var ready=new FileReader();
            ready.readAsDataURL(file);
            ready.onload=function(){
                var fileResult=this.result;
                canvasDataURL(fileResult,objCompressed,objDiv)
            }
        }

        function canvasDataURL(path, objCompressed, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var that = this;
                //默认压缩后图片规格
                var quality = 0.5;
                var w = that.width;
                var h = that.height;
                var scale = w / h;
                //实际要求
                w = objCompressed.width || w;
                h = objCompressed.height || (w / scale);
                if(objCompressed.quality && objCompressed.quality > 0 && objCompressed.quality <= 1){
                    quality = objCompressed.quality;
                }

                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);

                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }

        function convertBase64UrlToBlob(urlData) {
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }
    </script>
</head>
<body>
    <label>
        上传图片：
        <input type="file" id="file" accept="image/jpg,image/jpeg,image/png,image/svg,image/gif"><br><br>
        <button onclick="submitPic()">提交</button>
    </label>
</body>
</html>

 

posted @ 2019-10-10 10:54  Fourteen  阅读(5114)  评论(0)  编辑  收藏  举报