現(xiàn)在的web項目，圖片越來越多，圖片大小也越來越大，隨便就能達到1M,2M，甚至更大。用戶上傳的圖片，一般是無法直接使用的。一般要生成兩三種對應(yīng)的縮略圖，分別適配不同的終端，不同的場景。比如PC，手機，平板等等不同的終端；在比如圖片列表和圖片詳情，肯定一個要使用縮略圖，一個要使用高清圖。
一般圖片優(yōu)化的第一步，就是在適當(dāng)?shù)牡胤绞褂每s略圖，盡量不要在web端使用CSS縮放高清原始圖片。下面分析了java中如何生成不同的縮略圖的技術(shù)。
常見的圖片格式有： ".*//.(?i)(jpg|jpeg|gif|bmp|png)"
這其中有分為了兩種，png 和 gif 是一種，其它格式是一種，因為 png 和 gif 存在透明度的問題，如果按照jpg一樣處理，就會導(dǎo)致生成黑色背景的圖片。
1. 指定高度的等比例 縮放圖片：
/** * 按指定高度 等比例縮放圖片 * * @param imageFile * @param newPath * @param newWidth 新圖的寬度 * @throws IOException */ public static void zoomImageScale(File imageFile, String newPath, int newWidth) throws IOException { if(!imageFile.canRead()) return; BufferedImage bufferedImage = ImageIO.read(imageFile); if (null == bufferedImage) return; int originalWidth = bufferedImage.getWidth(); int originalHeight = bufferedImage.getHeight(); double scale = (double)originalWidth / (double)newWidth; // 縮放的比例 int newHeight = (int)(originalHeight / scale); zoomImageUtils(imageFile, newPath, bufferedImage, newWidth, newHeight); }
PRivate static void zoomImageUtils(File imageFile, String newPath, BufferedImage bufferedImage, int width, int height) throws IOException{ String suffix = StringUtils.substringAfterLast(imageFile.getName(), "."); // 處理 png 背景變黑的問題 if(suffix != null && (suffix.trim().toLowerCase().endsWith("png") || suffix.trim().toLowerCase().endsWith("gif"))){ BufferedImage to= new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g2d = to.createGraphics(); to = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT); g2d.dispose(); g2d = to.createGraphics(); Image from = bufferedImage.getScaledInstance(width, height, Image.SCALE_AREA_AVERAGING); g2d.drawImage(from, 0, 0, null); g2d.dispose(); ImageIO.write(to, suffix, new File(newPath)); }else{ // 高質(zhì)量壓縮，其實對清晰度而言沒有太多的幫助// BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// tag.getGraphics().drawImage(bufferedImage, 0, 0, width, height, null);//// FileOutputStream out = new FileOutputStream(newPath); // 將圖片寫入 newPath// JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);// JPEGEncodeParam jep = JPEGCodec.getDefaultJPEGEncodeParam(tag);// jep.setQuality(1f, true); //壓縮質(zhì)量, 1 是最高值// encoder.encode(tag, jep);// out.close(); BufferedImage newImage = new BufferedImage(width, height, bufferedImage.getType()); Graphics g = newImage.getGraphics(); g.drawImage(bufferedImage, 0, 0, width, height, null); g.dispose(); ImageIO.write(newImage, suffix, new File(newPath)); } }
上面中 zoomImageScale可以指定生成圖片的高度，然后寬度按照原始圖的 高寬比 計算出新圖片的寬度；同理也可以 指定生成圖片的寬度，來等比例生成新圖片。zoomImageUtils 方法中涉及到了三種圖片處理方法：
1）圖片的按照指定高度，寬度 進行普通的重繪：
BufferedImage newImage = new BufferedImage(width, height, bufferedImage.getType()); Graphics g = newImage.getGraphics(); g.drawImage(bufferedImage, 0, 0, width, height, null); g.dispose(); ImageIO.write(newImage, suffix, new File(newPath));
2）利用JPEGImageEncoder生成所謂的“高質(zhì)量”的圖片：
// 高質(zhì)量壓縮，其實對清晰度而言沒有太多的幫助// BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// tag.getGraphics().drawImage(bufferedImage, 0, 0, width, height, null);//// FileOutputStream out = new FileOutputStream(newPath); // 將圖片寫入 newPath// JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);// JPEGEncodeParam jep = JPEGCodec.getDefaultJPEGEncodeParam(tag);// jep.setQuality(1f, true); //壓縮質(zhì)量, 1 是最高值// encoder.encode(tag, jep);// out.close();
這種方法，其實僅僅是生成的圖片所占硬盤更大而已，但是實際上，對圖片的清晰度而已，沒有實際的作用。
3）png 和 gif 圖片不能采用上面說到的 圖片處理方法，因為會導(dǎo)致生成的圖片背景變成黑色，要另外處理(指定透明處理)：
BufferedImage to = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g2d = to.createGraphics(); to = g2d.getDeviceConfiguration().createCompatibleImage(width,height, Transparency.TRANSLUCENT); g2d.dispose(); g2d = to.createGraphics(); Image from = bufferedImage.getScaledInstance(width, height, Image.SCALE_AREA_AVERAGING); g2d.drawImage(from, 0, 0, null); g2d.dispose(); ImageIO.write(to, suffix, new File(newPath));
4）線性處理，本方法也不能處理 png 圖片：
/** * 等比例改變圖片尺寸 * @param nw 新圖片的寬度 * @param oldImage 原圖片 * @throws IOException */ public static void constrainProportios(int nw, String oldImage) throws IOException { AffineTransform transform = new AffineTransform(); BufferedImage bis = ImageIO.read(new File(oldImage)); int w = bis.getWidth(); int h = bis.getHeight(); int nh = (nw * h) / w; double sx = (double) nw / w; double sy = (double) nh / h; transform.setToScale(sx, sy); AffineTransformOp ato = new AffineTransformOp(transform, null); BufferedImage bid = new BufferedImage(nw, nh, BufferedImage.TYPE_3BYTE_BGR); ato.filter(bis, bid); String newPath = StringUtils.substringBeforeLast(oldImage,".")+"_3."+StringUtils.substringAfterLast(oldImage,"."); ImageIO.write(bid, "jpeg", new File(newPath));// ImageIO.write(bid, "jpeg", response.getOutputStream()); }
上面有4中圖片的生成方法，除了png需要另外處理之外，其它幾種圖片的處理方法，用實際生成的圖片的清晰度比較而言，實際上是差別不大，基本沒有明顯的差別。實際的測試發(fā)現(xiàn)，如果要生成的圖片和原始圖片，在清晰度上要達到用肉眼不能明顯區(qū)分它們的效果的話，關(guān)鍵的不是使用哪種圖片生成方法，關(guān)鍵的是不要讓生成的圖片的 width 和 height 太小！這個才是關(guān)鍵，實際測試發(fā)現(xiàn)，生成的圖片的 width 和 height 最好不要小于500，一定不要小于 400。
2. 按照指定的高度和寬度生成圖片：
/** * 按尺寸縮放圖片 * * @param imageFile * @param newPath * @param times * @throws IOException */ public static void zoomImage(File imageFile, String newPath, int width, int height) throws IOException { if (imageFile != null && !imageFile.canRead()) return; BufferedImage bufferedImage = ImageIO.read(imageFile); if (null == bufferedImage) return; zoomImageUtils(imageFile, newPath, bufferedImage, width, height); }
這里沒有按照原始圖片的 高寬比 來生成圖片，而是按照指定的 高度和寬度來生成圖片。一般而言，最好不要選擇這種處理方法，因為圖片會被壓縮或者拉伸，圖片會變得比較難看。
3. 實際效果比較：
1）原始圖片：600 x 800, 220k
2) 按照指定高度等比例生成的圖片，指定高度為448, 33.7k
3) 寬度和高度小于400的普通重繪的圖片，224 x 300, 12.9k
4) 寬度和高度小于400的 JPEGImageEncoder生成所謂的“高質(zhì)量”的圖片，224 x 300, 63.4k
5）上面四種圖片在網(wǎng)頁中，按照同樣的指定的圖片CSS下面的表現(xiàn):
img { height: auto; max-height: 300px; max-width: 224px; width: auto;}
可以比較明顯的看出，第一張和第二張圖片的清晰度是極其接近的，你甚至無法說出那張圖片更加清晰；而第三張和第四種圖片，從額前的頭發(fā)而言，就明顯的比第一張和第二張要差一些。
實際的圖片分別為：
第一張：按照指定高度等比例生成的圖片，指定高度為 448, 33.7k
第二張：原始圖片：600 x 800, 220k
第三張：寬度和高度小于400的普通重繪的圖片，224 x 300, 12.9k
第四張：寬度和高度小于400的 JPEGImageEncoder生成所謂的“高質(zhì)量”的圖片，224 x 300, 63.4k
結(jié)論：
生成的圖片的清晰度，主要取決于生成的圖片的高度和寬度的大小，而不是取決于圖片生成的算法；
如果要想達到肉眼無法分別的效果，生成圖片的高寬最好不要小于500，一定不要小于400；
-----
第四張圖片達到了63.4K，但是清晰度明顯差于第一張大小只有33.7K的圖片。圖片的寬度和高度的大小才是清晰度的決定因數(shù)。
第三張圖片只有 12.9K，而清晰度和第四張63.4K的圖片清晰度幾乎一樣，因為它們的尺寸是一樣的，都是224 x 300，盡管生成圖片的算法不一樣。
-----------------------------------------------------------------------
圖片處理時，可能會遇到的兩個問題：
1）上面的代碼處理 png 圖片時，如果png 圖片的寬度或者高度，數(shù)值特別大時，可能會導(dǎo)致內(nèi)存溢出，比如我在處理一張 320 x 16606 的png時，
jvm拋出了內(nèi)存溢出，所以如何在上面的代碼中加入一個判斷，如果圖片的寬度或者高度，數(shù)值特別大，跳過就行了。
2）JPG圖片可能會遇到：javax.imageio.IIOException: Unsupported Image Type 錯誤，
javax.imageio.IIOException: Unsupported Image Type at com.sun.imageio.plugins.jpeg.JPEGImageReader.readInternal(JPEGImageReader.java:1068) at com.sun.imageio.plugins.jpeg.JPEGImageReader.read(JPEGImageReader.java:1039) at javax.imageio.ImageIO.read(ImageIO.java:1448) at javax.imageio.ImageIO.read(ImageIO.java:1308)
該錯誤的原因是 圖片的模式錯了，PS保存圖片為jpg格式時，默認的模式是CMYK模式（注意，這是給印刷機用的）。所以我們應(yīng)該講模式改成：RGB. 在圖像-->模式中改為RGB模式才是顯示器用的。
參考：http://blog.sina.com.cn/s/blog_600ff075010153wn.html
http://iaiai.VEvb.com/blog/1461370
http://zhangmingji.VEvb.com/blog/1969693
也可以使用 imageMagick軟件的命令來處理：
C:/Users/Administrator>mogrify -colorspace RGB -quality 100 F:/upload/images/20150728/2015072822arrsOH.jpg
新聞熱點
疑難解答
