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';
        }
    });

    
});