前端上傳圖片時進行壓縮

本文轉載自查看原文 2019-10-10 10:54 1657 壓縮圖片/ js/ 項目場景備忘錄

　　前端上傳圖片時，對圖片大小進行判斷。如果上傳的圖片大於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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端上傳圖片並顯示 Django 后台保存前端上傳的圖片時報錯：django.http.multipartparser.MultiPartParserError: Invalid boundary in multipart: None 上傳圖片時使用crop進行裁剪前端上傳圖片到oss，壓縮圖片后上傳至oss（補充圖片文件旋轉90度問題） C# 接收前端上傳圖片 vue + element 上傳圖片時壓縮圖片簡單的前端上傳圖片代碼 vue 前端上傳圖片組件前端上傳到七牛雲圖片 web前端上傳圖片+預覽