媽蛋：kinMaxShow輪播圖異常，WebUploader圖片上傳坑爹，圖片被壓縮了

今天晚上在改造輪播圖。

     原來的代碼是這樣的：

     <div>

<img src="${static}/image/index/banner/`.jpg" />

</div>

<div>

<img src="${static}/image/index/banner/2.jpg" />

</div>

<div>

<img src="${static}/image/index/banner/3.jpg" />

</div>  

   爲了方便管理，輪播圖後臺能夠管理，因此前臺的輪播圖圖片，應該從數據庫中得到。
  這個功能，就是兩三分鐘的事，當即就搞定了。

   改造後的代碼：
   <!--輪播圖 -->

<div id="kinMaxShow" >

<#if bannerPhotoList?? && bannerPhotoList?size gt 0 > 
                              <#list

bannerPhotoList as item>

<div>

<img height="350px" src="${base}/image/${item.url}" />

</div>

</#list> <#else>

<div>

<img src="${static}/image/index/banner/4.jpg" />

</div>

<div>

<img src="${static}/image/index/banner/2.jpg" />

</div>

<div>

<img src="${static}/image/index/banner/3.jpg" />

</div>

</#if>

</div>  

問題出現了：
     自從使用了動態的圖片，輪播圖的圖片高度沒有佔滿「350px」 ，圖片的上下都有空白。很是可惡。

猜想：
     後端代碼的問題。
     通過對比2種狀況生成的HTML，徹底同樣，除了圖片地址不同。

不知道，通過了多久的Chrome查看元素，忽然意識到是否是圖片有問題了。

去查看圖片，發現高度只有250。尼瑪，真把老子當250了，坑爹貨啊。

所以，事實證實，圖片上傳後，通過了壓縮，高度變成了250了。

期間，我也debug SpringMVC圖片上傳的代碼，進入到後臺的時候，圖片已經變小了。所以，圖片變小是WebUploader圖片上傳組件乾的好事。

網上搜索WebUploader的資料，「WebUploader圖片壓縮」 ，零散地找到了一些資料。
 
WebUploader的官網打開很慢，經過百度快照，看了   WebUploader API文檔。

有這麼一點內容：

  compress {Object} [可選]

配置壓縮的圖片的選項。若是此選項爲false, 則圖片在上傳前不進行壓縮。

默認爲：

{

    width: 1600,

    height: 1600,

    // 圖片質量，只有type爲`image/jpeg`的時候纔有效。

    quality: 90,

    // 是否容許放大，若是想要生成小圖的時候不失真，此選項應該設置爲false.

    allowMagnify: false,

    // 是否容許裁剪。

    crop: false,

    // 是否保留頭部meta信息。

    preserveHeaders: true,

    // 若是發現壓縮後文件大小比原來還大，則使用原來圖片

    // 此屬性可能會影響圖片自動糾正功能

    noCompressIfLarger: false,

    // 單位字節，若是圖片大小小於此值，不會採用壓縮。

    compressSize: 0

}

能夠清楚地知道，這個組件有壓縮功能，在知足必定的條件下會壓縮。

爲了方便，直接在upload.js中增長
「 compress:false, 」 不壓縮，這個時候，上傳圖片就是「原樣」了。
至於 上面配置的「width:1600px」，我猜想是圖片的寬度和高度達到必定條件就壓縮。

總結： kinMaxShow輪播組件沒有問題，WebUploader看到圖片太大很不爽，就啓用了壓縮。

解決問題的思路：發現了問題，分析問題的類型，猜想，驗證。網上搜資料，找準關鍵詞。
本次搜索關鍵詞「WebUploader 壓縮」 。

小雷-正式開始第2次創業的旅途
2015年3月18日 23時湖北-武漢-循禮門