如题

   // 压缩图片的函数
        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~