使用Telerik AsyncUpload在Javascript中壓縮圖像

Question

我創建了一個壓縮JPEG圖像的javascript函數。 它適用於JPEG文件。 但即使是用戶也可以上傳xls，doc，pdf等。 所以除了JPG / JPEG之外，它還可以打破任何其他文件。 用戶也可以上傳其他類型的文件。 只需要壓縮JPG / JPEG。

其他部分工作得非常好。 需要修復If部分。

function OnClientFileSelected(radAsyncUpload, args) {
        var old_uploadFile = radAsyncUpload._uploadModule._uploadFile;
        var fileName = args.get_fileName();
        var fileExtention = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
        if (fileExtention.toLowerCase() != 'jpg' && fileExtention.toLowerCase() != 'jpeg') {
            radAsyncUpload._uploadModule._uploadFile = function (pair) {
                var uploadFile = pair.file;
                //return uploadFile;
                var reader = new FileReader();
                reader.readAsDataURL(uploadFile);
            }
        }
        else {
            radAsyncUpload._uploadModule._uploadFile = function (pair) {
                var uploadFile = pair.file;

                var img = document.createElement("img");
                var canvas = document.createElement("canvas");
                var reader = new FileReader();
                reader.onload = function (e) {
                    img.src = e.target.result
                    img.onload = function () {
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0);

                        var greaterDimension = 0;
                        var newPixelMultiplier = 1;

                        if (img.width > img.height)
                            greaterDimension = img.width;
                        else
                            greaterDimension = img.height;

                        if (greaterDimension > 1000) {
                            newPixelMultiplier = ((((greaterDimension - 1000) / 2) + 1000) / greaterDimension);
                        }

                        var MAX_WIDTH = img.width * newPixelMultiplier;
                        var MAX_HEIGHT = img.height * newPixelMultiplier;
                        var width = img.width;
                        var height = img.height;

                        if (width > height) {
                            if (width > MAX_WIDTH) {
                                height *= MAX_WIDTH / width;
                                width = MAX_WIDTH;
                            }
                        } else {
                            if (height > MAX_HEIGHT) {
                                width *= MAX_HEIGHT / height;
                                height = MAX_HEIGHT;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;

                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, width, height);


                        canvas.toBlob(function (blob) {
                            blob.lastModifiedDate = new Date();
                            blob.name = pair.file.name;
                            pair.file = blob;

                            old_uploadFile.call(this, pair)

                        }, 'image/jpeg', 0.6); //Set the Quality of Image...
                    }
                }
                reader.readAsDataURL(uploadFile);

            }
        }
    }

Answer 1

似乎調整大小的代碼來自以下知識庫文章： 使用RadAsyncUpload預覽上傳的圖像 。

如果是這種情況，我可以建議您保持代碼不變，或者在AsyncUpload控件的OnClientLoad事件中使用它，因為在您的情況下，它將在所選的每個文件上被覆蓋。

關於你的問題，我建議你嘗試調用old_uploadFile，如下所示：

if (/*is not image condition here*/) {
   old_uploadFile.call(radAsyncUpload, pair);
}

如果使用KB中的代碼，那么它應該類似於：

asyncupload._uploadModule._uploadFile = function (pair) {
    var uploadFile = pair.file;
    if (/*is not image condition here*/) {
        old_uploadFile.call(this, pair);
        return;
    }

    // rest of code for resizing images here
}