媽蛋：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時間
湖北-武漢-循禮門