上傳圖片時控制圖片的寬度和高度

Question

直接點。我想在用戶使用plupload上載圖像時設置圖像寬度和高度的限制。

Letsay： 如果 寬度：1000像素 高度：1000像素 其他 您必須上傳圖像與至少寬度：1000像素和高度：1000像素

// $(".form").validator(); 
$(function() { 
    if($("#uploader").length > 0) { 
     var uploader = new plupload.Uploader({ 
      runtimes : 'html5,flash,silverlight', 
      browse_button : 'pickfile', 
      container : 'uploader', 
      max_file_size : '10mb', 
      url : 'design.php?do=upload&ajax=1', 
      multiple_queues: false, 
      file_data_name: 'design', 
      flash_swf_url : www + '/js/plupload.flash.swf', 
      silverlight_xap_url : www + '/js/plupload.silverlight.xap', 
      filters : [ 
       {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"} 
      ] 

     }); 

     $('#uploadfiles').click(function(e) { 
      if($("#uploader select[name=category]").val() == "") { 
       $("#uploader select[name=category]").next('.error-required').show(); 
       return false; 
      } 

      uploader.start(); 
      e.preventDefault(); 
     }); 

     uploader.init(); 

那麼，這可能嗎？

Answer 1

您可以輕鬆地爲plupload編寫過濾器。

這裏是過濾器所需的最小寬度。 將波紋管代碼添加到腳本中。 （只是複製）

plupload.addFileFilter('min_width', function(maxwidth, file, cb) { 
    var self = this, img = new o.Image(); 

    function finalize(result) { 
     // cleanup 
     img.destroy(); 
     img = null; 

     // if rule has been violated in one way or another, trigger an error 
     if (!result) { 
      self.trigger('Error', { 
       code : plupload.IMAGE_DIMENSIONS_ERROR, 
       message : "Image width should be more than " + maxwidth + " pixels.", 
       file : file 
      }); 
    } 
     cb(result); 
    } 
    img.onload = function() { 
     // check if resolution cap is not exceeded 
     finalize(img.width >= maxwidth); 
    }; 
    img.onerror = function() { 
     finalize(false); 
    }; 
    img.load(file.getSource()); 
}); 

並將此過濾器添加到您的上傳腳本。

filters : { 
      min_width: 700, 
     }, 

Answer 2

Plupload本身不支持（although it has been requested）。這可能有幾個原因，首先是因爲在IE上傳之前你無法獲得圖像尺寸（you can in some other browsers），其次，雖然這對於使用HTML4/5方法的瀏覽器來說可行，但我不是確保Flash/Silverlight等方法也能夠可靠地確定尺寸。

如果您對有限的瀏覽器，HTML4/5方法感到滿意，只有您應該掛入"FilesAdded" event例如

uploader.bind('FilesAdded', function(up, files) { 
    //Get src of each file, create image, remove from file list if too big 
}); 

Answer 3

我最近想做同樣的事情，並且能夠按照Thom的建議實現它。儘管如此，他對此仍然是正確的。如果你想添加這個，它只能在現代瀏覽器中使用，而不能在閃存或Silverlight運行時中使用。這不是一個大問題，因爲我的非html5用戶只會在上傳之後得到錯誤，而不是之前。

我初始化了一個總圖像計數變量來跟蹤放置在頁面上的圖像。在我們讀完所有照片之後，我們還可以存儲想要刪除的照片。

var total_image_count = 0; 
var files_to_remove = []; 

然後，我閱讀的FileReader（）掛起的文件，將它們放置在頁面上，並得到他們的寬度

init:{ 
     FilesAdded: function(up, files) { 
      if (uploader.runtime == "html5"){ 
       files = jQuery("#"+uploader.id+"_html5")[0].files 
       console.log(files); 
       for (i in files){ 

       //create image tag for the file we are uploading 
       jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container"); 

       reader_arr[total_image_count] = new FileReader(); 

       //create listener to place the data in the newly created 
       //image tag when FileReader fully loads image. 
       reader_arr[total_image_count].onload = function(total_image_count) { 
        return function(e){ 
         var img = $("#image-"+total_image_count); 
         img.attr('src', e.target.result); 
         if ($(img)[0].naturalWidth < 1000){ 

          files_to_remove.push(files[i]); //remove them after we finish reading in all the files 
          //This is where you would append an error to the DOM if you wanted. 
          console.log("Error. File must be at least 1000px"); 
         } 
        } 
       }(total_image_count); 

       reader_arr[total_image_count].readAsDataURL(files[i]); 

       total_image_count++; 
       } 
       for (i in files_to_remove){ 
       uploader.removeFile(files_to_remove[i]); 
       } 
      } 
     } 
    } 

作爲一個方面說明，我是想顯示圖像的縮略圖，無論如何，所以這種方法對我很好。我還沒有想出如何在沒有首先將其附加到DOM的情況下獲取圖像的寬度。

來源：

縮略圖上傳之前的圖像： https://stackoverflow.com/a/4459419/686440

訪問圖像的自然寬度： https://stackoverflow.com/a/1093414/686440

Answer 4

訪問寬度和heigth不帶縮略圖，你可以做到這一點的圖像：

uploader.bind('FilesAdded', function(up, files) { 
    files = jQuery("#"+uploader.id+"_html5").get(0).files; 
    jQuery.each(files, function(i, file) { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var image = new Image(); 
      image.src = e.target.result; 

       image.onload = function() { 
        // access image size here using this.width and this.height 
       } 
      }; 

     }); 

     reader.readAsDataURL(file); 
    } 
}