自我LV1

如題

   // 壓縮圖片的函數
        function compressImage(image, quality, callback) {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width =200;
            canvas.height = 200;
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            canvas.toBlob(function (blob) {
                callback(blob);
            }, 'image/jpeg', quality);
        }

 

重點:

quality最小可以設定0.1，非常失真

canvas.width、 canvas.height可以將圖片修改長寬

 

利用這3個條件，就可以把圖片壓的很小了

 

CODE:

// 迴圈處理每個 img 元素
                imgElements.each(function () {
                    // 取得圖片的路徑
                    var imagePath = $(this).attr("src");
                    // 載入圖片
                    var image = new Image();
                    image.src = imagePath;
                    if (image !== "" && image !== undefined) {
                        //PageMethods.SaveCapturedImage_TB_SALES_RECORDS_PHOTOS(imagePath, Success, Failure)
                        const originalSizeKB = Math.ceil((image.src.length));
                        // 壓縮圖片並使用 PageMethods.SaveCapturedImage 上傳
                        compressImage(image, 0.3, function (compressedBlob) {
                            // 將壓縮後的圖片轉換為Base64字串
                            const reader = new FileReader();
                            reader.onload = function () {
                                const compressedBase64 = reader.result;
                                const compressedSizeKB = Math.ceil((compressedBase64.length));

                                //alert('originalSizeKB ' + Math.ceil(originalSizeKB / 1024));
                                //alert('compressedSizeKB ' + Math.ceil(compressedSizeKB / 1024));

                                // 使用 PageMethods.SaveCapturedImage 上傳壓縮後的圖片
                                PageMethods.SaveCapturedImage_TB_SALES_RECORDS_PHOTOS(compressedBase64, PHOTOSID)
                

                            };
                            reader.readAsDataURL(compressedBlob);
                        });
                    }
                });

 

 

自我LV~