圖片加載方法及系統的製作方法
2023-10-24 03:35:07 3
圖片加載方法及系統的製作方法
【專利摘要】本發明公開圖片加載方法及系統，其中，所述方法包括步驟：圖片接收端接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；圖片接收端根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據；伺服器接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來，並將提取出來的圖片數據返回至圖片接收端；圖片接收端接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。本發明提高了圖片的下載顯示速度，還改善了用戶瀏覽圖片的效果。
【專利說明】圖片加載方法及系統
【技術領域】
[0001]本發明涉及數字圖像處理【技術領域】，尤其涉及圖片加載方法及系統。
【背景技術】
[0002]當前，信息技術迅猛發展，從有線網絡發展到無線網絡，Internet網際網路終端從傳統的PC終端發展到智慧型手機、智能平板、智能電視等各式各樣的終端設備。
[0003]伴隨著信息分享方式的多樣化，現在基於圖片的服務軟體逐漸流行，由於圖片與文本信息相比數據量大，特別是一些高質量的大圖片，通過網絡傳輸到終端的時間比較長，用戶需要等待很長時間才能看到完整的圖片。
[0004]現有技術中，比較主流的圖片加載技術是順序下載圖片數據並逐行顯示圖片的，但在網絡較差的情況下用戶剛開始只能看到圖片頂端的部分，無法快速的獲取圖片全貌，還有一種技術是先下載解析度和數據量很小的縮略圖顯示模糊全貌的圖片，接著下載解析度大一點的縮略圖顯示清晰一點的圖片，最後下載整個原圖數據後最終顯示原圖，這種方案在不穩定的無線網絡下容易造成最後原圖數據下載不了，只顯示了解析度小的模糊的圖片。
[0005]因此，現有技術還有待於改進和發展。
【發明內容】
[0006]鑑於上述現有技術的不足，本發明的目的在於提供一種圖片加載方法及系統，旨在解決現有技術中圖片下載時間長、顯示速度慢的問題。
`[0007]本發明的技術方案如下:
一種圖片加載方法，其中，包括步驟:
A、圖片接收端接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；
B、圖片接收端根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據；
C、伺服器接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來，並將提取出來的圖片數據返回至圖片接收端；
D、圖片接收端接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。
[0008]所述的圖片加載方法，其中，所述步驟A中的圖片信息包括圖片的地址、寬度及高度?目息。
[0009]所述的圖片加載方法，其中，所述步驟A中，生成並顯示所述原始位圖的過程包括:
Al、判斷所述圖片在本地是否有縮略圖，當有時轉入步驟Α2，否則轉入步驟A3 ;
Α2、根據縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖； A3、生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖；
A4、將步驟A2或A3生成的原始位圖進行顯示。
[0010]所述的圖片加載方法，其中，所述步驟B中，所述圖片接收端同時發送多個請求，或者按照一定的時間間隔順序發送請求。
[0011]所述的圖片加載方法，其中，所述步驟B中的請求包括:圖片的分割量N、圖片的圖片數據編號以及返回圖片數據使用的壓縮算法。
[0012]所述的圖片加載方法，其中，所述步驟C具體包括:
Cl、按照圖片的寬度及高度將圖片生成相同尺寸的圖片位圖；
C2、通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置；
C3、將按照定位出的位置對應的像素放置在一局部像素數組中提取出所述圖片數據編號對應的圖片數據。
[0013]所述的圖片加載方法，其中，所述步驟D具體包括:
D1、將接收到的圖片數據還原為寬度及高度分別與圖片的寬度及高度對應相同的局部位圖；
D2、根據所述局部位圖採用定位算法定位所述圖片數據的所有像素在所述原始位圖的原始像素數組中的位置，按照定位出的位置將圖片數據的所有像素填充到所述原始位圖的原始像素數組中；
D3、填充完畢後，顯示填充後的原始位圖。
[0014]一種圖片加載系統，其中，包括圖片接收端及伺服器，所述圖片接收端包括:原始位圖生成模塊、請求發送模塊及圖片顯示模塊，所述伺服器包括圖片數據提取模塊、圖片數據返回模塊；
所述原始位圖生成模塊，用於接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；
所述請求發送模塊，用於根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據；
所述圖片數據提取模塊，用於接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來；
所述圖片數據返回模塊，用於將提取出來的圖片數據返回至圖片接收端；
所述圖片顯示模塊，用於接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。
[0015]所述的圖片加載系統，其中，所述原始位圖生成模塊包括:
判斷單元，用於判斷所述圖片在本地是否有縮略圖；
原始位圖生成單元，用於當所述圖片有縮略圖時根據縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖，或者當所述圖片無縮略圖時生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖；
顯示單元，用於生成的原始位圖進行顯示。
[0016]所述的圖片加載系統，其中，所述圖片數據提取模塊包括:
圖片位圖生成單元，用於按照圖片的寬度及高度將圖片生成相同尺寸的圖片位圖； 定位單元，用於通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置；
提取單元，用於將按照定位出的位置對應的像素放置在一局部像素數組中提取出所述圖片數據編號對應的圖片數據。
[0017]有益效果:本發明通過同時或分步請求圖片的每個部分的圖片數據，每收到任何一部分圖片數據後都可以立即顯示，並且顯示的圖片是全圖輪廓，顯示效果由模糊到清晰，所以本發明不僅提高了圖片的下載顯示速度，還改善了用戶瀏覽圖片的效果。此外，由於圖片被分割為了多個部分，在請求發送圖片數據的過程中，如果大部分請求成功，而小部分請求失敗，也並不影響原圖顯示的整體效果，這樣用戶既能夠儘快瀏覽到圖片的全貌，又能防止圖片下載失敗導致看不到比較清晰的有全部輪廓的圖片的問題，本發明可以廣泛應用在PC終端、智慧型手機、智能平板、智能電視中。
【專利附圖】
【附圖說明】
[0018]圖1為本發明圖片加載方法較佳實施例的流程圖。
[0019]圖2為圖1所示方法中生成並顯示所述原始位圖的過程的具體流程圖。
[0020]圖3為圖1所示方法中提取圖片數據的過程的具體流程圖。
[0021]圖4為圖1所示方法中填充並顯示圖片數據的過程的具體流程圖。
[0022]圖5為本發明圖片加載系統較佳實施例的結構框圖。
[0023]圖6為圖5所示系統中原始位圖生成模塊的結構框圖。
[0024]圖7為圖5所示系統中圖片數據提取及返回模塊的結構框圖。
[0025]圖8為圖5所示系統中圖片顯示模塊的結構框圖。
【具體實施方式】
[0026]本發明提供一種圖片加載方法及系統，為使本發明的目的、技術方案及效果更加清楚、明確，以下對本發明進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，並不用於限定本發明。
[0027]請參閱圖1，圖1為本發明圖片加載方法較佳實施例的流程圖，如圖所示，其包括步驟:
5101、圖片接收端接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；
5102、圖片接收端根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據；
5103、伺服器接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來，並將提取出來的圖片數據返回至圖片接收端；
5104、圖片接收端接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。
[0028]在步驟SlOl中，首先是圖片接收端接收到用戶的瀏覽指令，然後獲取用戶需瀏覽的圖片的圖片信息，該圖片接收端可以是例如PC終端、智慧型手機、智能平板或者智能電視等等任意的終端設備，用戶在圖片接收端發出瀏覽圖片的指令後，圖片接收端開始獲取該圖片的圖片信息。所述的圖片信息包括圖片的地址、圖片的寬度Width、圖片的高度Height，此外，還要根據所述圖片信息生成一原始位圖，該原始位圖可以由圖片的縮略圖生成，或者直接為該縮略圖，如圖2所示，其過程包括:
S201、判斷所述圖片在本地是否有縮略圖，當有時轉入步驟S202，否則轉入步驟S203 ；此步驟是判斷圖片是否有縮略圖，當有時根據該縮略圖生成原始位圖，當沒有時，則需要根據圖片的尺寸來直接生成。
[0029]S202、根據縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖；
當有時，則將該縮略圖生成一個尺寸與圖片相同的原始位圖，該原始位圖是一個不清晰的圖片，但該原始位圖顯示了圖片的基本輪廓，從而使用戶可以一開始就能看到圖片的全貌。
[0030]S203、生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖；
當沒有該圖片的縮略圖時，則需要自動生成一張尺寸與圖片相同的原始位圖，這張原始位圖的像素值處處相同，例如為全黑或者全白，這樣以後加載的圖片數據能夠逐漸顯示在該原始位圖上。
[0031]S204、此步驟是將步驟S202或者S203生成的原始位圖顯示出來，以使用戶能夠第一時間得到該圖片的全部輪廓。
[0032]在步驟S102中，圖片接收端還需根據圖片尺寸將圖片確定為合適的N部分，然後向伺服器發送N個請求，來獲取這N個請求對應的N部分圖片數據，將圖片分為N部分的目的是分別接收N部分圖片數據，這樣可以提高圖片下載的速度，減少等待的時間，並且即使小部分圖片數據沒有接收到，也不影響用戶看到全部輪廓的圖片。前述的將圖片確定為N部分，是根據圖片尺寸來確定的，而不是將實際的圖片分割為N部分，下面詳細描述如何確定N部分:根據圖片的寬度和高度，計算出圖片的總像素量P，P等於Width乘Heigh，那麼N等於P除以(50X 1024)(即50KB大小)，這樣N即為一個較合適的值，即可加快傳輸速度，又能保證顯示足夠的圖片數據，而按照上述公式獲得的N小於I時，則取N為I，若想顯示完整的清晰圖片，則需要發送N個請求，獲得所有的N部分圖片數據。當然，前述的50KB是一個較佳的實施例，本發明也可選擇50KB左右的其他值，同樣能夠實現本發明的目的。
[0033]圖片接收端可以向伺服器分別請求N個部分的圖片數據，即一部分圖片數據對應一個請求，一共N個請求，這N個請求可以按照不同的方式發送，例如在網絡穩定和網速較快的情況下同時發送多個請求，甚至同時發送N個請求，而在網絡較差和網速較慢的情況下則按照一定的時間間隔順序發送請求，例如依次發送第一個請求、第二個請求、第三個請求等等。
[0034]在發送的請求中，除了包含圖片的分割量N、圖片的圖片數據編號(即所請求獲取的圖片數據屬於N部分中的第幾部分)外，還包括返回圖片數據使用的壓縮算法，例如採用http協議上的gzip (GNUzip，一種文件壓縮程序)壓縮方式對圖片數據進行壓縮。
[0035]在步驟S103中，伺服器接收到請求後，將該請求對應的圖片數據從圖片中提取出來，然後返回至圖片接收端。
[0036]其中，如圖3所示，伺服器提取圖片的圖片數據過程具體包括:S301、按照圖片的寬度及高度將圖片生成相同尺寸的圖片位圖；
此步驟是將圖片按照其尺寸生成一個圖片位圖，方便提取圖片數據，該圖片位圖的尺寸與圖片本身是一致的。
[0037]S302、通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置；
通過定位算法定位出圖片數據編號對應的圖片數據的所有像素在圖片位圖的位置，其目的是在圖片位圖中找到請求中所需的圖片數據的所有像素的位置。
[0038]其中，本發明中的定位算法是指按照一定的方式提取圖片的圖片數據，比如圖片被分割為N個部分，其中請求獲取的圖片數據編號為T (T^N), ImgData表示圖片像素數組，即圖片所有的像素分布為:寬為Width、高位Height的二維數組；
定位算法就是先將ImgData中的每一行按順序分為M部分(M是由N來確定的，M與N的乘積大於等於ImgData中的每一行的像素量，並且M取其最小值，例如ImgData中每一行具有23個像素，N為4，M與N的乘積應大於等於23，並且M取其最小值，如此，可計算得到M為6)，若Width是N的整數倍，則M部分中的每一部分均有N個像素(舉例說明，若ImgData中每一行具有24個像素,那麼N為4,那麼每一行可分為M (M為6)部分,這6部分中每一部分具有4個像素)，但是由於Width不一定是N的整數倍，所以第M部分的像素個數小於或等於N(即前述的每一行具有23個像素的情況，第6部分中只有3個像素，而不是4個像素)，M部分中，每一部分中的第T個像素即為要提取的像素，該像素所在位置即為其在圖片位圖的位置。當然，如果第M部分中沒有該第T個像素時，則為無效值。
[0039]S303、將按照定位出的位置對應的像素放置在一局部像素數組中形成所述圖片數據編號對應的圖片數據，該局部像素數組為原始圖片的總像素數組的一部分，即N部分圖片數據中的某一部分。
[0040]這個過程就是提取某一請求對應的圖片數據的過程，這個圖片數據可以形成一個寬高與圖片相同的一個小圖片。
[0041]然後，伺服器將提取出來的圖片數據按照請求中包含的壓縮算法將圖片數據壓縮打包發送給圖片接收端。
[0042]在步驟S104中，圖片接收端接收到所述圖片數據的壓縮包後，按照所述壓縮算法對應的解壓縮方法對其進行解壓，獲取其中的圖片數據，最後還需要將該圖片數據與原始位圖合併，從而使原始位圖加載該圖片數據對應的部分，使原始位圖逐漸清晰。
[0043]如圖4所示,其加載顯示的過程具體包括:
5401、將接收到的圖片數據還原為寬度及高度分別與圖片的寬度及高度對應相同的局部位圖；
5402、根據所述局部位圖使用定位算法定位所述圖片數據的所有像素在所述原始位圖的原始像素數組中的位置，按照定位出的位置將圖片數據的像素填充到所述原始位圖的原始像素數組中；
5403、填充完畢後，顯示填充後的原始位圖。
[0044]上述過程從原理上來說，是提取圖片數據的逆過程，這樣獲得了 N個請求對應的圖片數據後，即可完整清晰的顯示圖片的內容了。
[0045]本發明中，通過同時或分步請求圖片的每個部分的圖片數據，每收到任何一部分圖片數據後都可以立即顯示，並且顯示的圖片是全圖輪廓，顯示效果由模糊到清晰，所以本發明不僅提高了圖片的下載顯示速度，還改善了用戶瀏覽圖片的效果。此外，由於圖片被分割為了多個部分，在請求發送圖片數據的過程中，如果大部分請求成功，而小部分請求失敗，也並不影響原圖顯示的整體效果，這樣用戶既能夠儘快瀏覽到圖片的全貌，又能防止圖片下載失敗導致看不到比較清晰的有全部輪廓的圖片的問題，本發明可以廣泛應用在PC終端、智慧型手機、智能平板、智能電視中。
[0046]基於上述方法，本發明還提供一種圖片加載系統，如圖5所示，包括圖片接收端100及伺服器200，所述圖片接收端100包括:原始位圖生成模塊110、請求發送模塊120及圖片顯示模塊130，所述伺服器200包括圖片數據提取模塊210、圖片數據返回模塊220 ；
所述原始位圖生成模塊110，用於接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；
所述請求發送模塊120，用於根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據；
所述圖片數據提取模塊210，用於接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來；
所述圖片數據返回模塊220，用於將提取出來的圖片數據返回至圖片接收端；
所述圖片顯示模塊130，用於接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。關於上述功能模塊的作用在前面的方法中已有詳述，故不再贅述。
[0047]進一步,如圖6所示,所述原始位圖生成模塊110包括:
判斷單元111，用於判斷所述圖片在本地是否有縮略圖；
原始位圖生成單元112，用於當所述圖片有縮略圖時將縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖，或者當所述圖片無縮略圖時生成像素值生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖；
顯示單元113，用於生成的原始位圖進行顯示。關於上述功能模塊的作用在前面的方法中已有詳述，故不再贅述。
[0048]進一步，如圖7所示，所述圖片數據提取模塊210包括:
圖片位圖生成單元211，用於按照圖片的寬度及高度將圖片生成相同尺寸的圖片位
圖；
定位單元212，用於通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置；
提取單元213，用於將按照定位出的位置對應的像素放置在一局部像素數組中提取出所述圖片數據編號對應的圖片數據。關於上述功能模塊的作用在前面的方法中已有詳述，故不再贅述。
[0049]進一步,如圖8所示,所述顯示模塊130包括:
局部位圖生成單元131，用於將接收到的圖片數據還原為寬度及高度分別與圖片的寬度及高度對應相同的局部位圖；
填充單元132，用於根據所述局部位圖採用定位算法定位所述圖片數據的所有像素在所述原始位圖的原始像素數組中的位置，並按照定位出的位置將圖片數據的所有像素填充到所述原始位圖的原始像素數組中； 顯示單元113，用於填充完畢後，顯示填充後的原始位圖。關於上述功能模塊的作用在前面的方法中已有詳述，故不再贅述。
[0050]應當理解的是，本發明的應用不限於上述的舉例，對本領域普通技術人員來說，可以根據上述說明加以改進或變換，所有這些改進和變換都應屬於本發明所附權利要求的保護範圍。
【權利要求】
1.一種圖片加載方法，其特徵在於，包括步驟: A、圖片接收端接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖； B、圖片接收端根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據； C、伺服器接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來，並將提取出來的圖片數據返回至圖片接收端； D、圖片接收端接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。
2.根據權利要求1所述的圖片加載方法，其特徵在於，所述步驟A中的圖片信息包括圖片的地址、寬度及高度信息。
3.根據權利要求2所述的圖片加載方法，其特徵在於，所述步驟A中，生成並顯示所述原始位圖的過程包括: Al、判斷所述圖片在本地是否有縮略圖，當有時轉入步驟A2，否則轉入步驟A3 ； A2、根據縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖； A3、生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖； A4、將步驟A2或A3生成的原始位圖進行顯示。
4.根據權利要求1所述的圖`片加載方法，其特徵在於，所述步驟B中，所述圖片接收端同時發送多個請求，或者按照一定的時間間隔順序發送請求。
5.根據權利要求1所述的圖片加載方法，其特徵在於，所述步驟B中的請求包括:圖片的分割量N、圖片的圖片數據編號以及返回圖片數據使用的壓縮算法。
6.根據權利要求5所述的圖片加載方法，其特徵在於，所述步驟C具體包括: Cl、按照圖片的寬度及高度將圖片生成相同尺寸的圖片位圖； C2、通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置； C3、將按照定位出的位置對應的像素放置在一局部像素數組中提取出所述圖片數據編號對應的圖片數據。
7.根據權利要求6所述的圖片加載方法，其特徵在於，所述步驟D具體包括: D1、將接收到的圖片數據還原為寬度及高度分別與圖片的寬度及高度對應相同的局部位圖； D2、根據所述局部位圖採用定位算法定位所述圖片數據的所有像素在所述原始位圖的原始像素數組中的位置，按照定位出的位置將圖片數據的所有像素填充到所述原始位圖的原始像素數組中； D3、填充完畢後，顯示填充後的原始位圖。
8.一種圖片加載系統，其特徵在於，包括圖片接收端及伺服器，所述圖片接收端包括:原始位圖生成模塊、請求發送模塊及圖片顯示模塊，所述伺服器包括圖片數據提取模塊、圖片數據返回模塊； 所述原始位圖生成模塊，用於接收到用戶的瀏覽指令，獲取用戶需瀏覽的圖片的圖片信息，根據所述圖片信息生成並顯示與圖片尺寸相同的原始位圖；所述請求發送模塊，用於根據圖片尺寸將所述圖片分為N部分向伺服器發送N個請求，用於獲取對應的N部分圖片數據； 所述圖片數據提取模塊，用於接收到所述請求後，將所述圖片的與請求對應的圖片數據提取出來； 所述圖片數據返回模塊，用於將提取出來的圖片數據返回至圖片接收端； 所述圖片顯示模塊，用於接收到所述圖片數據後，將所述圖片數據填充到所述原始位圖上，並進行顯示。
9.根據權利要求8所述的圖片加載系統，其特徵在於，所述原始位圖生成模塊包括: 判斷單元，用於判斷所述圖片在本地是否有縮略圖； 原始位圖生成單元，用於當所述圖片有縮略圖時根據縮略圖生成寬度及高度分別與圖片的寬度及高度對應相同的原始位圖，或者當所述圖片無縮略圖時生成像素值唯一且寬度及高度分別與圖片的寬度及高度對應相同的原始位圖； 顯示單元，用於生成的原始位圖進行顯示。
10.根據權利要求8所述的圖片加載系統，其特徵在於，所述圖片數據提取模塊包括: 圖片位圖生成單元，用於按照圖片的寬度及高度將圖片生成相同尺寸的圖片位圖； 定位單元，用於通過定位算法定位所述圖片數據編號對應的圖片數據的所有像素在所述圖片位圖中的位置； 提取單元，用於將按照定位出的位置對應的像素放置在一局部像素數組中提取出所述圖片數據編號對應的圖片`數據。
【文檔編號】H04L29/08GK103514241SQ201210522041
【公開日】2014年1月15日 申請日期:2012年12月7日 優先權日:2012年12月7日
【發明者】覃春光 申請人:Tcl集團股份有限公司