前言:
我們在PC端用瀏覽器看圖片的時候,經(jīng)常是先看到一張模糊圖,然后再漸漸的變得清晰,這種情況在看漫畫的時候尤其常見(模糊圖如下),這種效果就叫做漸進式加載.漸進式加載能夠大大的提升體驗感,我們先來了解一下漸進式加載的原理.
(圖片來自網(wǎng)絡)
1.JPEG
要做到漸進式加載,我們的圖片需要是JPEG格式,而JPEG格式的圖片又分為兩種,我們要做到漸進式加載的話,需要的是Progressive JPEG.
(1)Baseline JPEG（標準型）
這種格式的圖片在保存信息的時候,是從上往下,將每一行的數(shù)據(jù)順序的保存起來的,所以讀一部分就展示的話,那么效果就會像是從上往下一點一點展示.
(圖片來自網(wǎng)絡)
(2)Progressive JPEG（漸進式）
這種格式的圖片在保存信息的時候,是一幀一幀的存儲的,如果逐幀逐幀的讀的話,就會先看到模糊圖,然后一點一點變清晰
(圖片來自網(wǎng)絡)
(圖片來自網(wǎng)絡)
2.解碼
如何判斷是否JPEG格式的圖片呢?下面引用一段Glide框架的代碼
//ImageHeaderParser.javaprivate static final int EXIF_MAGIC_NUMBER = 0xFFD8;// JPEG.if (firstTwoBytes == EXIF_MAGIC_NUMBER) { return JPEG;}
我們可以看出,JPEG是以FFD8開頭的
其實JPEG是以FFD8開頭,FFD9結(jié)尾,FFDA代表一個幀的開頭
FFD8 ... FFDA ... FFDA ... FFDA ... FFD9
Baseline JPEG 里面只有一個FFDA
Progressive JPEG 里面含有多個FFDA
比較完整的數(shù)據(jù)結(jié)構(gòu)如下
(圖片來自Wiki)https://en.wikipedia.org/wiki/JPEG
3.如何保存或者轉(zhuǎn)換成JPEG
(以下轉(zhuǎn)換方法來自網(wǎng)絡,由于非Java代碼,所以沒有做驗證,特此說明一下)
1、PhotoShop
在photoshop中有“存儲為web所用格式”，打開后選擇“連續(xù)”就是漸進式JPEG。
2、Linux
檢測是否為progressive jpeg ： identify -verbose filename.jpg | grep Interlace（如果輸出 None 說明不是progressive jpeg；如果輸出 Plane 說明是 progressive jpeg。）將basic jpeg轉(zhuǎn)換成progressive jpeg：> convert infile.jpg -interlace Plane outfile.jpg
3、PHP
使用imageinterlace和imagejpeg函數(shù)我們可以輕松解決轉(zhuǎn)換問題。
<?php $im = imagecreatefromjpeg('pic.jpg'); imageinterlace($im, 1); imagejpeg($im, './php_interlaced.jpg', 100); imagedestroy($im);?>
4、Python
import PILfrom exceptions import IOErrorimg = PIL.Image.open("c:\users\biaodianfu\pictures\in.jpg")destination = "c:\users\biaodianfu\pictures\test.jpeg"try: img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)except IOError: PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1] img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
5、jpegtran
jpegtran -copy none -progressive <inputfile> <outputfile>
6、C
using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); EncoderParameters parameters = new EncoderParameters(3); parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L); parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced); parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); source.Save(@"D:\temp\saved.jpg", codec, parameters);}
4.效果
明白了漸進式加載的原理后,我們就能想辦法在app端也做到漸進式加載的效果了.
(大概就是判斷是否JPEG圖片,然后根據(jù)每一幀的節(jié)點來判斷并決定是否需要加載)
下面展示一下效果圖
(1)原圖
(Progressive JPEG的圖一打水印就變成Baseline JPEG,應該是CSDN打水印保存的時候處理了)
(2)解碼到第一個FFDA與第二個FFDA的中間
(3)剛好解碼到第二個FFDA
(4)解碼到第五個FFDA
需要看圖片二進制結(jié)構(gòu)的,可以下載一些工具(如hex-editor-neo)hex-editor-neo下載
在后面的文章里面我們將具體講解如何在app端做漸進式加載
