使用 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

调整大小的代码似乎来自以下知识库文章：Preview uploaded image with RadAsyncUpload。

如果是这种情况，我可以建议您保持代码原样，或者在 AsyncUpload 控件的 OnClientLoad 事件中使用它，因为在您的情况下，它将在每个被选择的文件上被覆盖.

关于你的问题，我可以建议你尝试调用 old_uploadFile 如下：

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

如果使用了知识库中的代码，那么应该是这样的：

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
}