使用Telerik AsyncUpload用Javascript压缩图像

时间:2019-05-16 11:21:30

标签: javascript jquery telerik

我创建了一个可压缩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);

            }
        }
    }

1 个答案:

答案 0 :(得分:0)

调整大小的代码似乎来自以下知识库文章: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
}