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