webuploader项目中遇到的问题（图片尺寸）

最近项目需要，需要web上传视频到阿里云，最后团队决定是视频图片直接传到阿里云，视频先传到自己的服务器再传到阿里云，介于视频可能比较大，所以最后选择了百度团队出品的webuploader，具体用法百度的api很清楚，也很多博客。

本次想要记录的是如何限制上传图片的尺寸，具体方法是调用makeThumb这个方法：

    imgUploader.on( 'fileQueued', function( file ) {
      imgUploader.makeThumb(file, function (error, src) {//验证图片尺寸
          imgWidth = file._info.width;
          imgHeight = file._info.height;
          if(!(imgWidth == 480 && imgHeight == 270) && !(imgWidth == 960 && imgHeight == 540) && !(imgWidth / imgHeight) != (16 / 9)){
          bmhCommon.alertBox('图片尺寸不符合要求',1000);
          imgUploader.reset();
          $('.img-name').val('')
          return false;
      }
      }, 100, 100);
      
        imgUploader.md5File( file ).then(function(val) {
            imgMD5 = val;
            imgUploader.options.server ='&type=image&md5='+ val ;
        });
        $('.img-name').val(file.name)
    });

其他具体请见百度api，有详细案例，这里只是做个记录，部分代码：

jQuery(function() {
    var $ = jQuery,
        $list = $('#thelist'),
        $btn = $('#ctlBtn'),
        state = 'pending',
        uploader;
        var formatLimitImage,formatLimitImageArr;
    imgUploader = WebUploader.create({
       auto: false,
        resize: false,
        swf:  './Uploader.swf',//BASE_URL +

        // 文件接收服务端。
        server:dataUrl,
        pick:{
            id: '#pickerImg',
            name:'selectImage',
            multiple:false
        },
        fileVal:"selectImage",
        // fileSingleSizeLimit: 10*1024*1024,
        chunked:false,
        accept: {// 只允许选择图片文件格式
            title: 'Images',
            //extensions: 'gif,jpg,bmp,png',
            mimeTypes: 'image/*'
        },
        whLimit:{width:[100,300], height:[200, 400]}
    });

    
    imgUploader.on('beforeFileQueued', function (file) {
      
      

      imgUploader.reset()
        formatLimitImage = $('.formatLimitImage').text().toLowerCase()
        formatLimitImageArr = formatLimitImage.split('|')
        var fileImgName = file.name;//图片名称
        var fileImgSize = file.size;//图片文件大小
        var extStart = fileImgName.lastIndexOf('.');
        var ext = fileImgName.substring(extStart, fileImgName.length).toUpperCase();
        ext = ext.replace('.', '').toLowerCase()

        if (formatLimitImageArr.indexOf(ext) == -1) {
            bmhCommon.alertBox('支持的图片格式：' + formatLimitImage);
            return false;
        };
        // $('#pickerImg').find('input').attr('id','img');
        // var img = document.getElementById('img');
        // var path = img.value;

    });
    // 当有文件添加进来的时候
    imgUploader.on( 'fileQueued', function( file ) {
      imgUploader.makeThumb(file, function (error, src) {//验证图片尺寸
          imgWidth = file._info.width;
          imgHeight = file._info.height;
          if(!(imgWidth == 480 && imgHeight == 270) && !(imgWidth == 960 && imgHeight == 540) && !(imgWidth / imgHeight) != (16 / 9)){
          bmhCommon.alertBox('图片尺寸不符合要求',1000);
          imgUploader.reset();
          $('.img-name').val('')
          return false;
      }
      }, 100, 100);
      
        imgUploader.md5File( file ).then(function(val) {
            imgMD5 = val;
            imgUploader.options.server ='&type=image&md5='+ val ;
        });
        $('.img-name').val(file.name)
    });


    imgUploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上传');
    });

    imgUploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    imgUploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    imgUploader.on( 'all', function( type ) {
        if ( type === 'startUpload' ) {
            state = 'uploading';
        } else if ( type === 'stopUpload' ) {
            state = 'paused';
        } else if ( type === 'uploadFinished' ) {
            state = 'done';
        }
    });

    
});