TWI518535B - Image style - oriented web page automated color matching method - Google Patents

Description

影像風格導向網頁自動化配色方法

本發明係一種網頁配色方法，尤指一種依據影像風格導向之網頁自動化配色方法。

由於網際網路之發展，人們多透過網路來閱覽以及查詢所需之資料，而各個部落客、入口網站以及網路廣告商們無不在網頁內容以及網頁之排版上耗費心思編輯，以吸引更多的閱覽者來觀看。

而網頁版面的配色方式會直接影響到網頁閱讀的舒適程度以及閱覽者對此網頁的印象。然而現今的網頁的設計者大多未研習過色彩學以及藝術相關之專門訓練，因此網頁設計者在網頁色彩的配置以及風格的規畫上，無法如專業級的畫家呈現出亮眼以及獨特的配置風格，而無法讓閱覽者留下深刻的印象。

有鑑於目前網頁之排版設計需求，如何提供一種讓網頁設計者將網頁之色彩風格快速的配置成與所欲影像近似風格之方法乃本領域亟需解決之技術問題。

為解決前揭習知技術之技術問題，本發明之一目的係提供一種影像風格導向網頁自動化配色方法，以提供網頁設計者自動網頁排版配色之解決方案。

為達上述之目的，本發明提供一種應用於一電腦裝置的影像風格導向網頁自動化配色方法，該方法包含下列步驟：首先，讀取一影像。接著，依據影像內之色彩面積比例，以擷取出至少一影像色彩。最後，依據影像色彩其中之一來對位於一網頁上之至少一內容資訊其中之一進行排版設定。

為達上述之目的，本發明提供一種用於影像風格導向網頁自動化配色之電腦程式產品，當電腦載入該電腦程式並執行後，可完成上述之影像風格導向網頁自動化配色方法。

綜上所述，透過本發明之影像風格導向網頁自動化配色方法可自動的將網頁版面編輯成符合所欲影像之配色風格。

S101~S103‧‧‧步驟

S201~S204‧‧‧步驟

第1圖係為本發明之影像風格導向網頁自動化配色方法流程圖。

第2圖係為本發明影像色彩擷取方法流程圖。

第3圖係為本發明之一實施例所讀取之影像。

第4圖係為本發明之一實施例之影像所擷取出之前5大影像色彩。

第5圖係為本發明之一實施例之明視度說明。

第6圖係為本發明之一實施例之網頁排版結果。

以下將描述具體之實施例以說明本發明之實施態樣，惟其並非用以限制本發明所欲保護之範疇。

請參閱第1圖，其為本發明之影像風格導向網頁自動化配色 方法，該方法係應用於一電腦裝置，該方法更包含下列步驟：S101：讀取一影像。

S102：依據影像之色彩面積之比例，以擷取出至少一影像色彩。

S103：依據影像色彩其中之一，以對位於一網頁上的至少一內容資訊其中之一進行排版設定。

進一步說明，當內容資訊之數量等於影像色彩預設之擷取數量時，則依據各影像色彩對位於網頁上之各個內容資訊進行排版設定。而當內容資訊之數量小於影像色彩預設之擷取數量時，則所需擷取之影像色彩數量即為內容資訊之數量(例如當內容資訊數量僅有3篇時，則只擷取前3大之影像色彩)，並依據各影像色彩對位於網頁上之各內容資訊進行排版設定。而當內容資訊之數量大於影像色彩預設之擷取數量時(例如內容資訊數量為7篇，而預設之擷取之影像色彩為5時)，則重覆使用各個影像色彩來對各內容資訊進行排版設定。

前述之電腦裝置係指個人電腦、伺服電腦、筆記型電腦、平板電腦、手持行動通訊裝置等具有電腦運算之裝置。前述之影像係為電子檔案格式之畫像、圖片或相片其中之一。內容資訊更包含了內容影像以及內容內文。

前述之排版設定係將內容資訊位於網頁之背景色彩調整為匹配之影像色彩、對內容影像進行風格濾鏡影像處理，或者依據背景色彩之明度來調整內容內文之明視度。風格濾鏡影像處理係將調整影像色彩之透明度後，再將調整透明度後之影像色彩疊加到前述之內容影像。明視度之調整係在背景色彩越暗時，則將文字色彩調整的越亮；而當背景色彩較 亮時，則將文字色彩調暗。

而在內容資訊與影像色彩搭配的選擇上，可透過內容資訊內容量與影像色彩之色彩面積比例順序進行配置或者隨機的進行配置。舉例而言，可將色彩面積比例最大的影像色彩與內容量最多的內容資訊進行配置。

請參閱第2圖，其為依據影像色彩其色彩面積比例之影像色彩擷取方法流程圖：S201：將影像中所有像素建置於RGB(Red、Green、Blue)所構成之三維空間，其中R、G、B皆為[0,255]之整數。

S202：在RGB構成之三維空間中找出包含所有色彩像素之區塊。

S203：從區塊中最長維度之中位值對區塊進行切割。

S204：重覆前述之步驟，直到將區塊分割出N個區域，其中N為所欲選取影像色彩之數量，而各個區塊之像素之平均值即為所欲擷取之影像色彩。

本發明更提供一種用於網頁自動化配置之電腦程式產品，當電腦載入該電腦程式並執行後，可完成前述之網頁自動化配色方法。

請參閱第1圖，其為本發明之一實施例。當本發明之網頁自動化配色方法執行時，會先讀取一電子檔案之影像，本實施例所讀取之影像如第3圖所示，為畢卡索之畫作「哭泣的女人」。接著，透過第2圖所述之方法，再依據影像內各影像色彩的面積大小來擷取出前5大影像色彩，而第3圖之影像分析出來之前5大影像色彩如第4圖所示。

接著，選擇的利用擷取出來的影像色彩對欲進行排版的內容 資訊進行排版設定。舉例而言，當選定影像色彩為紅色時，排版設定會將對應內容資訊之背景色彩設定為紅色，並將透明度調整為45%之紅色色層套疊到對應的內容影像上，並再調整內容內文的明視度，以讓閱覽者能在紅色的背景色彩下清晰且舒適的閱覽內容內文。請參閱第5圖，調整明視度後的內容內文其文字顏色與背景色彩的對比關係就如同各個三角形與其搭配方形之顏色對比關係。最後，經由排版設定後之網頁如第6圖所示。

上列詳細說明係針對本發明之一可行實施例之具體說明，惟該實施例並非用以限制本發明之專利範圍，凡未脫離本發明技藝精神所為之等效實施或變更，均應包含於本案之專利範圍中。

S101~S103‧‧‧步驟

Claims (10)

1. 一種影像風格導向網頁自動化配色方法，應用於一電腦裝置，包含下列步驟：讀取一影像；依據該影像內之色彩面積比例，以擷取出至少一影像色彩；以及依據該等影像色彩其中之一，將位於一網頁上之至少一內容資訊其中之一進行排版設定；其中，該至少一影像色彩之擷取方法包含下列步驟：將該影像中所有色彩像素建置於紅、綠、藍所構成之三維空間；在該三維空間找出包含所有色彩像素之區塊；從該區塊最長維度之中位值對該區塊進行切割；其中，更重覆執行該擷取方法內之步驟，以將該區塊分割出N個區域，其中N為所欲選取之該影像色彩之數量，而各該區塊之像素平均值即為所欲擷取之該影像色彩。
2. 如請求項1所述之方法，其中該影像係為畫像影像、圖像影像，或相片影像其中之一。
3. 如請求項1所述之方法，其中所需擷取之該等影像色彩之數量為5。
4. 如請求項1所述之方法，更依據該等內容資訊之數量來決定所需擷取該等影像色彩之數量。
5. 如請求項1所述之方法，更包含下列步驟：當該等影像色彩之數量小於該等內容資訊之數量，則重覆依據該等影像色彩其中之一來對該等內容資訊其中之一進行排版設定。
6. 如請求項1所述之方法，其中該網頁之排版設定係將該內容資訊位於該網頁之背景色彩設定為匹配之該影像色彩。
7. 如請求項1所述之方法，其中該內容資訊更包含一內容影像，該網頁之排版設定係挑選該等影像色彩其中之一，並將挑選出之影像色彩進行透明化處理後疊加至該內容影像。
8. 如請求項1所述之方法，其中該內容資訊更包含一內容內文，該網頁之排版係為依據該等色彩資訊其中之一設置匹配之該內容內文之明視度。
9. 如請求項1所述之方法，其中該網頁之排版設定係依據該等內容資訊之內容量與該等影像色彩之色彩面積比例順序進行配置。
10. 一種用於影像風格導向網頁自動化配色之電腦程式產品，當電腦載入該電腦程式並執行後，可完成請求項1至9中任一項所述之方法。