TWI546772B - 影像疊層處理方法與系統 - Google Patents

影像疊層處理方法與系統 Download PDF

Info

Publication number
TWI546772B
TWI546772B TW104138056A TW104138056A TWI546772B TW I546772 B TWI546772 B TW I546772B TW 104138056 A TW104138056 A TW 104138056A TW 104138056 A TW104138056 A TW 104138056A TW I546772 B TWI546772 B TW I546772B
Authority
TW
Taiwan
Prior art keywords
image
mask
foreground
background
processing method
Prior art date
Application number
TW104138056A
Other languages
English (en)
Other versions
TW201719578A (zh
Inventor
李雨暹
林文祥
林震洲
Original Assignee
粉迷科技股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 粉迷科技股份有限公司 filed Critical 粉迷科技股份有限公司
Priority to TW104138056A priority Critical patent/TWI546772B/zh
Priority to US15/004,121 priority patent/US10430052B2/en
Application granted granted Critical
Publication of TWI546772B publication Critical patent/TWI546772B/zh
Priority to EP16198403.4A priority patent/EP3171261A1/en
Priority to JP2016223846A priority patent/JP2017097872A/ja
Priority to KR1020160153931A priority patent/KR101811042B1/ko
Publication of TW201719578A publication Critical patent/TW201719578A/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00—Details of television systems
    • H04N5/222—Studio circuitry; Studio devices; Studio equipment
    • H04N5/262—Studio circuits, e.g. for mixing, switching-over, change of character of image, other special effects ; Cameras specially adapted for the electronic generation of special effects
    • H04N5/272—Means for inserting a foreground image in a background image, i.e. inlay, outlay
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/11—Region-based segmentation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/194—Segmentation; Edge detection involving foreground-background segmentation
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/36—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory
    • G09G5/39—Control of the bit-mapped memory
    • G09G5/395—Arrangements specially adapted for transferring the contents of the bit-mapped memory to the screen
    • G09G5/397—Arrangements specially adapted for transferring the contents of two or more bit-mapped memories to the screen simultaneously, e.g. for mixing or overlay
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0464—Positioning
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/12—Overlay of images, i.e. displayed pixel being the result of switching between the corresponding input pixels
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2354/00—Aspects of interface with display user

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Computer Hardware Design (AREA)
  • Processing Or Creating Images (AREA)
  • Controls And Circuits For Display Device (AREA)
  • Editing Of Facsimile Originals (AREA)
  • Studio Circuits (AREA)
  • User Interface Of Digital Computer (AREA)
  • Image Processing (AREA)

Description

影像疊層處理方法與系統
本發明有關一種影像處理方法與相關系統，特別是指一種透過使用者介面處理相互疊層動態影像的方法，以及執行此方法的系統。
當使用者操作電腦裝置操作貼圖(sticker)時，一般來說先選定一背景影像，接著選定一個要貼在背景影像上的圖案，再選擇貼圖的位置後，可以將圖案覆蓋所選定位置，結合背景影像後形成一個新的具有貼圖的影像。
在此操作環境下，當使用者希望讓前景圖案的部分隱藏在背景影像的某的區域或物件之後，可以使用相關軟體中的裁切工具將前景圖案根據隱藏位置的樣式進行裁切，使得經裁切的前景圖案與背景影像結合時，產生前景圖案的部分隱藏在背景影像的視覺效果。
示意圖如圖9A至圖9C所示的習知技術貼圖的方法例圖。
在圖9A中，顯示有一如背景影像的第二圖案902，另有作為前景貼圖的第一圖案901，當使用者欲將第一圖案901的某部分隱藏在第二圖案902某個區域之後，而不是直接貼在第二圖案902上，就可如圖9B所示，根據隱藏位置的樣式，利用軟體方法裁切第一圖案901，形成切割之第一圖案901’。圖9C形成兩個圖案結 合後的影像。
當習知技術提供貼圖的處理方法係先裁切作為貼圖的前景影像，而使得前景影像不會保留原本的樣貌，並且因此產生新的切割後的前景影像也容易應用在別的影像應用上，有鑑於此，本發明揭露書提出一新的影像疊層處理方法，以及執行此方法的系統，此影像疊層處理方法不同於習知貼圖的處理方式，並能保留前景圖案原本的樣貌，可以產生新的不同應用。
在一實施例中，影像疊層處理方法主要步驟包括先自一資料庫中取得至少兩張影像，並在這些影像中設定第一影像與第二影像，之後通過一使用者介面，於第一影像上設定涵蓋一區域的遮罩，形成第三影像，經疊合第一、第二與第三影像，可以形成一疊層影像。
在另一實施例描述中，影像疊層處理方法可先自電腦系統之一記憶體中取得至少兩張影像，使用者可以選擇其中影像為一背景影像與一前景影像，影像在處理中皆可暫存於電腦系統的記憶體中，電腦系統為具備一觸控屏幕的電腦裝置，觸控屏幕顯示背景影像，讓使用者以一手勢於觸控屏幕上產生涵蓋一區域的觸控訊號，觸控訊號經處理後形成一遮罩影像，同樣也暫存在記憶體中，此遮罩影像取自背影影像，於前景影像套用此遮罩影像後，使得背景影像中設為遮罩的區域影像遮蔽了前景影像的部分，形成一新的前景影像，新的前景影像將暫存在記憶體中，之後可疊合新的前景影像與背景影像，形成一疊層影像。
於再一實施例中，背景影像可為具有至少一個物件的靜態或動態影像，而前景影像則可為一動態影像，也就是經以上步驟處理而結合背景影像時，仍可保持其動態的樣態。
在另一實施方式中，使用前述遮罩的機制，可讓前景影像為 位置、大小，與/或角度可隨意調整的靜態或動態影像。
為了能更進一步瞭解本發明為達成既定目的所採取之技術、方法及功效，請參閱以下有關本發明之詳細說明、圖式，相信本發明之目的、特徵與特點，當可由此得以深入且具體之瞭解，然而所附圖式與附件僅提供參考與說明用，並非用來對本發明加以限制者。
1‧‧‧電腦系統
10‧‧‧觸控屏幕
101‧‧‧背景影像
102‧‧‧背景物件
103‧‧‧前景物件
12‧‧‧操作界面區
105‧‧‧影像設定工具
107‧‧‧遮罩設定工具
108‧‧‧放大編輯工具
109‧‧‧指觸設定工具
201‧‧‧背景影像
202‧‧‧前景物件
20‧‧‧手
203‧‧‧遮罩影像
202’‧‧‧遮罩後前景物件
301‧‧‧第一影像
302‧‧‧第二影像
302’‧‧‧遮罩後第二影像
303‧‧‧第三影像
304‧‧‧疊層影像
401‧‧‧背景物件一
402‧‧‧背景物件二
403‧‧‧背景物件三
404‧‧‧前景物件
405‧‧‧遮罩影像一
406‧‧‧遮罩影像二
404’‧‧‧遮罩後前景物件
501‧‧‧背景物件一
502‧‧‧背景物件二
503‧‧‧前景影像
504‧‧‧遮罩影像一
503’‧‧‧遮罩後前景影像
505‧‧‧遮罩影像二
503”‧‧‧遮罩後前景影像
71‧‧‧資料庫
72‧‧‧記憶體
步驟S601~S613‧‧‧影像疊層處理流程
步驟S701~S709‧‧‧影像疊層處理流程
步驟S801~S807‧‧‧影像疊層處理流程
901‧‧‧第一圖案
902‧‧‧第二圖案
901’‧‧‧切割之第一圖案
圖1顯示為執行本發明影像疊層處理方法的操作畫面實施例示意圖；圖2A至圖2C顯示以一觸控屏幕實現本發明影像疊層處理方法產生疊層影像的實施例示意圖；圖3A至圖3D示意顯示執行本發明影像疊層處理方法的步驟例圖之一；圖4A至圖4D示意顯示執行本發明影像疊層處理方法的步驟例圖之二；圖5A至圖5D示意顯示在本發明影像疊層處理方法下多遮罩設定與影像動態變化的例圖；圖6顯示之流程描述本發明影像疊層處理方法的實施例之一；圖7顯示之流程描述本發明影像疊層處理方法的實施例之二；圖8顯示之流程描述本發明影像疊層處理方法的實施例之三；圖9A至圖9C顯示習知技術貼圖的方法例圖。
本發明揭露書揭露一種影像處理方法與相關系統，可提供使用者透過使用者介面處理相互疊層動態影像，特別是可以保留原本貼圖影像原貌，而以遮罩的方式產生貼圖的部分隱藏在某些物件之後的視覺效果。值得一提的是，在本發明揭示之影像處理方 法下，前景貼圖圖案可以為動態影像，在連續影像處理的機制下，更可以讓使用者隨意改變前景的大小、轉向等形式，隨時呈現貼圖的部分隱藏在某些背景物件之後的視覺效果。
應用本發明影像疊層處理方法以及執行此方法的系統中，系統可應用在一電腦裝置上，其中的操作畫面實施例示意圖可參考圖1，而此圖例僅示意表示操作畫面，而非用以顯示實際實現的樣態。
圖中顯示有一電腦系統1，除了一般電腦裝置搭配滑鼠、鍵盤等輸入裝置的樣態外，更可以為具備有觸控屏幕10的電腦裝置。觸控屏幕10即為提供使用者操作影像疊層處理方法的使用者介面，使用者介面或可指以軟體手段在此觸控屏幕啟始之一圖形使用者介面(GUI)。
圖例顯示影像疊層處理上顯示有一背景影像101，如一個顏色、花紋組合的影像，或是一個風景影像或是特定圖案，並不限於何種影像，可以為靜態或持續變動的動態影像。背景影像101上可以包括有特定圖形的背景物件102，如一個風景物件、人物、建築物，或僅是一個圖案而已，也不限於特定形式的圖案。
再有一前景物件103，此可為一個讓使用者隨意改變位置、大小與/或角度可隨意調整的影像，可為動態或靜態影像。前景物件103在此實施例中如一欲貼附在背景影像101上的貼圖，但是卻可在本發明影像疊層處理方法中產生隱藏於背景影像101中特定背景物件102之後的圖案，特別是其位置、大小與角度都可隨意調整，而不用因為改變了型態(位置、大小、角度)而需要重新裁切。
圖例顯示這是一個運作於觸控屏幕10上的圖形使用者介面，其中可包括讓使用者操作產生疊層影像的操作界面區12，其中具備有各種圖形處理的工具，可通過觸控屏幕10上之一選擇工具設定背景影像與前景影像，並於背景影像上設定遮罩範圍。如此圖 例顯示的影像設定工具105，可以讓使用者選擇指定背景影像(如101與102)、前景影像(如103)；設有遮罩設定工具107，提供使用者增減圖中遮罩的位置與數量；設有放大編輯工具108，方便使用者在細微處操作圖形工具的軟體工具；另有指觸設定工具109，提供使用者以手勢在觸控屏幕10操作時能控制指觸大小，例如當使用者以手指頭在某個位置繪圖或是設定遮罩時，可以控制指觸面積。
此圖例顯示執行本發明影像疊層處理方法之後，可以產生前景物件103躲藏於背景物件102之後的視覺效果。然而，卻不同於習知技術以裁切前景物件(貼圖)的方式，本發明係於背景物件102上設定遮罩，當結合前景物件103時，讓此遮罩遮蔽前景物件103對應的位置，產生此圖例的效果。更者，由於前景物件103在本發明的機制下並未改變原圖案影像，讓使用者可以隨意改變擺設前景物件103的位置，甚至是調整大小與角度，使得當前景物件103與背景影像101(包括背景物件102)結合，仍可隱藏在遮罩之後。
圖2A至圖2C接著以圖例顯示以一觸控屏幕實現本發明影像疊層處理方法產生疊層影像的實施例示意圖。
在圖2A中，顯示有如前述的電腦系統1，其中可以具備觸控屏幕10，另有軟體實現的操作界面區12，觸控屏幕10上顯示有背景影像201，另設有前景物件202。此時，圖例示意表示使用者可以手20在背景影像201的某處位置上執行滑動的手勢，讓運作於電腦系統1中執行此影像疊層處理方法的軟體程式可以接收到一連續觸控訊號，這些觸控訊號將對應到一個影像區域，這個區域將形成作為遮罩(mask)的遮罩影像。實施例並不排除其他形成遮罩影像的方式，比如以觸控筆塗抹、畫框選取等的方式決定遮罩位置。
舉例來說，提供使用者介面讓使用者在顯示背景影像的觸控 屏幕10上，以觸碰手勢為沿著背景影像201上一特定物件的輪廓邊緣執行之一抹除動作，由觸控屏幕10產生對應此抹除動作的觸控訊號，觸控訊號涵蓋一個區域。
接著如圖2B所示，在電腦系統1的觸控屏幕10上形成對應前述觸控訊號對應的區域的遮罩影像203，以斜紋圖案表示。
圖2C則繼續表示，當使用者移動前述的前景物件202到要擺的位置上，如所處位置涵蓋遮罩影像203，該處將被隱藏而顯示出背景影像的部分，最後如圖顯示形成為遮罩後前景物件202’。值得一提的是，在圖形處理的技術中，使用者可以操作前景物件202的位置、大小與角度，調整的過程將持續產生與遮罩影像203組合產生的暫存圖形，讓使用者在選擇置放前景物件202時，可以隨意調整前景物件202的位置、大小、角度，最後決定時即產生得到包括此例的背景影像201與遮罩後前景物件202’的疊層影像。
形成疊層影像的過程可以參考圖3A至圖3D示意顯示的例圖。
圖3A示意表示有一第一影像301，此可如前述實施例的背景影像或背景物件。圖3B顯示為作為前景物件(或貼圖)的第二影像302。圖3C顯示在第一影像301設有一作為遮罩的第三影像303，可如前述的遮罩影像。
接著在圖3D形成最終疊層影像304，也就是將第二影像302移進作為遮罩的第三影像303時，重疊的影像會被遮蔽，而顯示出第二影像302被第一影像301的特定區域所遮蔽，最後形成未被遮蔽的部分，如圖示的遮罩後第二影像302’。最後即形成第一影像301與遮罩後第二影像302’疊合形成的疊層影像304。
圖4A至圖4D則是示意顯示影像疊層處理方法可以提供使用者設定多個遮罩的步驟流程。
此例在圖4A顯示有具有三個背景物件的背景影像，包括有背景物件一401、背景物件二402與背景物件三403。而圖4B顯示 有一可讓使用者操作移動位置、大小或角度的前景物件404。
此實施例提供使用者可以根據預定的圖形設定多個遮罩，也就是使用者可以隨意在背景影像上設定多處可遮蔽第二影像302的遮罩影像，讓如前述遮罩後第二影像302’具有多處被遮蔽的區域。如圖4C顯示，在背景物件一401上形成有遮罩影像一405，例如使用者可以使用軟體工具以手勢或其他選擇某圖形區塊的方式決定此遮罩區域；另在背景物件三403上形成另一遮罩，利用類似方式產生遮罩影像二406。
需一提的是，形成的遮罩影像(405、406)在系統運作時將於此階段暫存於記憶體中，並能有某種圖案形式在顯示屏幕上呈現給使用者查看與確認。
之後如圖4D所示，讓使用者移動前景物件404進入背景物件一401、背景物件二402與背景物件三403當中，在此階段相關軟體程式將隨時結合遮罩影像(405、406)與前景物件404，形成暫存於記憶體中的新的影像，當使用者移動後確認前景物件404位置，即與背景影像疊合形成遮罩後前景物件404’，其顯示重疊到遮罩位置的部分被隱藏在後的視覺效果。
在本發明影像疊層處理方法提供的機制下，可以讓前景影像或物件為一動畫(animation)，而仍有視覺上隱藏在特定背景物件後的效果，實施例可參閱圖5A至圖5D。
圖5A顯示背景影像有至少兩個背景物件，包括背景物件一501(顯示如一大樓)與背景物件二502(顯示如一遠山)。圖5B顯示有一前景影像503(顯示如一月亮)，特別以一箭頭表示此前景影像503為一動態影像，例如是一個循環變化的動畫。
圖5C顯示使用者可以在背景物件一501上的某處設定一個遮罩影像一504，也就是在預定讓前景影像503隱藏在背景物件一501後的位置形成遮罩影像一504，經套用在前景影像503時，形成遮罩後前景影像503’，也就產生視覺上月亮(前景影像503) 被大樓(背景物件一501)遮蔽的效果。此時，背景物件二502尚未設定遮罩。
圖5D接著顯示在背景物件二502上形成遮罩影像二505，也就是讓前景影像503不僅被背景物件一501遮蔽，也被背景物件二502所遮蔽，因為遮罩影像一504與遮罩影像二505與前景影像503結合時會即時形成暫存於系統記憶體的影像，經確認位置後，形成遮罩後前景影像503”。整體形成一個前景為動畫的疊層影像。
相關影像疊層處理方法實施例可參考圖6所示之流程。在此實施例中，影像疊層處理方法應用於一電腦系統中，電腦系統可以為一般電腦裝置、行動裝置等，以一軟體程式提供一個操作環境讓使用者操作選擇影像與設定遮罩。
方法開始如步驟S601，自一個資料庫，或是即時拍攝影像而選定多張影像，即時拍攝影像也可暫存至一電腦系統的記憶體中，實施例也不排除以其他形式儲存的記憶媒體。再由這些影像中設定一背景影像(步驟S603)與至少一前景影像(步驟S605)，接著提供使用者通過一使用者介面在背景影像上設定一遮罩範圍(步驟S607)，遮罩的設定可參考圖8顯示的流程，但不排除其他選取特定影像區域的方式，而遮罩數量也不限定於特定數量，使得所述前景影像上可具有配合背景影像之多處被遮蔽的區域。
之後如步驟S609，以軟體方法套用遮罩範圍於前景影像，使得背景影像上設為遮罩區域的影像遮蔽前景影像上與遮罩影像的疊合區域，重繪畫面時可形成新的前景影像，如步驟S611。其中，因為軟體方法允許前景影像與遮罩範圍即時結合，在未決定被遮蔽的前景影像位置時，重繪而即時產生新的前景影像，這個前景影像也即時暫存在記憶體中。最後，如步驟S613，經確認前景影像位置、大小、角度等樣式後，形成一疊層影像。此方法更允許背景影像或其中背景物件可為靜態或動態影像，而前景影像可為 一動畫，且讓使用者調整前景影像時，可以隨意調整其位置、大小、角度。
圖7顯示為本發明影像疊層處理方法的另一實施例流程。此流程表示所述的各種影像並無需分別為前景或背景，而方法可適用於具有各種影像物件的畫面中。
先自資料庫71取得至少兩張影像(步驟S701)，這些影像可以隨使用者喜好設定至少有第一影像與第二影像(步驟S703)，選定後，將先暫存於系統的記憶體72中，並提供使用者介面讓使用者在所選定的影像上設定遮罩，此例比如在第一影像上形成遮罩，此遮罩涵蓋範圍形成第三影像(步驟S705)，第三影像將暫存至記憶體72。在一實施例中，此時，電腦系統可直接自記憶體72取得所述的第一影像、第二影像與第三影像，直接疊合這些影像後形成一疊層影像。
但仍如本圖示之流程實施例，方法接著自記憶體72取得第二與第三影像，結合後(步驟S707)，可使得第一影像中設為遮罩區域的影像遮蔽原第二影像，使得重疊部分可產生以第三影像遮蔽第二影像的效果。
方法提供在於第二影像上套用第三影像的步驟在重繪(redraw)時即時處理，也就是系統讓使用者可以隨時改變第二影像的樣貌，包括位置、大小與角度，系統則能隨時取得疊合第一、第二與第三影像的畫面，當使用者確認第二影像位置後，程序將終止，形成疊層影像(步驟S709)，將此最後影像儲存到資料庫71。
根據實施例之一，上述第一影像雖不限，但可為背景影像；第二影像可設為前景影像，第三影像即為設定背景影像中某區域為遮罩的遮罩影像，使得第一影像遮蓋前景影像上與遮罩影像的疊合區域。
圖8接著描述影像疊層處理方法中形成遮罩影像的實施例流 程。
上述使用者介面可為電腦系統或特定終端裝置上的觸控屏幕，可如步驟S801所示，先以觸控屏幕顯示背景影像，讓使用者以手勢觸碰背景影像上某區域，如步驟S803，連續產生在此區域上的觸控訊號，經訊號處理後，判斷出一個遮罩範圍，如步驟S805，並於確認後形成一遮罩影像，如步驟S807。
在形成遮罩影像的步驟中，可依據背景影像中之至少一個物件的輪廓所形成，用以套用前述如前景影像的第二影像而形成新的前景影像，使得疊合新的前景影像與背景影像時，形成視覺上以至少一個物件遮蔽前景影像的疊層影像。方法也讓使用者設定多個不同位置的遮罩影像，讓疊層影像顯出多層次的視覺效果。
是以，根據揭露書所載實施例，本發明實施例所揭示的影像疊層處理方法係以在背景影像上設定遮罩的機制產生可以遮蔽前景影像的視覺效果，不同於先前技術係以事先裁切影像的方式。本發明更提出一種執行前述方法的影像疊層處理系統，運行如一電腦系統，具有一處理器與一記憶體，以處理器執行記憶體中儲存之一程式集，以執行如圖6至圖9所述影像疊層處理方法的實施例流程。
惟以上所述僅為本發明之較佳可行實施例，非因此即侷限本發明之專利範圍，故舉凡運用本發明說明書及圖示內容所為之等效結構變化，均同理包含於本發明之範圍內，合予陳明。
1‧‧‧電腦系統
10‧‧‧觸控屏幕
101‧‧‧背景影像
102‧‧‧背景物件
103‧‧‧前景物件
12‧‧‧操作界面區
105‧‧‧影像設定工具
107‧‧‧遮罩設定工具
108‧‧‧放大編輯工具
109‧‧‧指觸設定工具

Claims (14)

  1. 一種影像疊層處理方法，包括：自一電腦系統取得至少兩張影像；於該至少兩張影像中，設定一第一影像與一第二影像；通過一觸控屏幕，於該第一影像上設定涵蓋一區域的至少一遮罩，形成一第三影像；其中設定該遮罩的方式係以該觸控屏幕顯示該第一影像，並接收該觸控屏幕以一手勢產生對應該區域的觸控訊號，形成涵蓋該區域的該遮罩；以及疊合該第一影像、該第二影像與該第三影像，形成一疊層影像。
  2. 如請求項1所述的影像疊層處理方法，其中該第一影像與該第二影像為靜態或動態影像。
  3. 如請求項2所述的影像疊層處理方法，其中該第三影像使得該第一影像的該區域的影像遮蔽該第二影像上與該第三影像的疊合區域。
  4. 如請求項3所述的影像疊層處理方法，其中該第二影像為位置、大小與/或角度可調整的靜態或動態影像。
  5. 如請求項1所述的影像疊層處理方法，其中於該第一影像上設定之該至少一遮罩包括一或多處遮罩影像，以使該第二影像具有一或多處被遮蔽的區域。
  6. 一種影像疊層處理方法，應用於一電腦系統中，包括：自該電腦系統之一記憶體中取得至少兩張影像；於該至少兩張影像中，設定一背景影像與一前景影像；以一觸控屏幕顯示該背景影像，以一手勢於該觸控屏幕上產生涵蓋至少一區域的觸控訊號，形成至少一遮罩影像；以及疊合該背景影像、該遮罩影像與該前景影像，形成一疊 層影像。
  7. 如請求項6所述的影像疊層處理方法，其中該背景影像為一具有至少一個物件的靜態或動態影像；該前景影像為一靜態或動態影像。
  8. 如請求項7所述的影像疊層處理方法，其中，於疊合該背景影像、該至少一遮罩影像與該前景影像形成該疊層影像之前，先於該前景影像套用該至少一遮罩影像，使得該背景影像上該區域的影像遮蔽該前景影像上與該遮罩影像的疊合區域，重繪形成一暫存於該電腦系統之該記憶體中的一新的前景影像，確認後形成該疊層影像。
  9. 如請求項8所述的影像疊層處理方法，其中該遮罩影像係依據該背景影像中之該至少一個物件的輪廓所形成，並套用該前景影像形成該新的前景影像，使得疊合該新的前景影像與該背景影像時，形成視覺上以該至少一個物件遮蔽該前景影像的該疊層影像。
  10. 如請求項9所述的影像疊層處理方法，其中該前景影像為位置、大小與/或角度可調整的靜態或動態影像。
  11. 如請求項10所述的影像疊層處理方法，其中於該背景影像上設定之該至少一遮罩影像，以使該前景影像具有一或多處被遮蔽的區域。
  12. 如請求項6至11其中之一所述的影像疊層處理方法，其中係通過該觸控屏幕上之一選擇工具設定該背景影像與該前景影像，並於該背景影像上設定該遮罩範圍，其中形成該遮罩影像的方法包括：以該觸控屏幕顯示該背景影像；接收該觸控屏幕以該手勢產生對應該區域的觸控訊號，該區域即形成該遮罩影像；以及暫存該遮罩影像。
  13. 如請求項12所述的影像疊層處理方法，其中，於提供顯示該背景影像之該觸控屏幕上，該手勢為沿著該背景影像上一特定物件的輪廓邊緣執行之一抹除動作，由該觸控屏幕產生對應該抹除動作的觸控訊號，該觸控訊號涵蓋該區域。
  14. 一種影像疊層處理系統，具有一處理器與一記憶體，以該處理器執行該記憶體中儲存之一程式集，以執行如請求項1或6所述的影像疊層處理方法。
TW104138056A 2015-11-18 2015-11-18 影像疊層處理方法與系統 TWI546772B (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
TW104138056A TWI546772B (zh) 2015-11-18 2015-11-18 影像疊層處理方法與系統
US15/004,121 US10430052B2 (en) 2015-11-18 2016-01-22 Method and system for processing composited images
EP16198403.4A EP3171261A1 (en) 2015-11-18 2016-11-11 Method and system for processing composited images
JP2016223846A JP2017097872A (ja) 2015-11-18 2016-11-17 画像積層処理方法及びシステム
KR1020160153931A KR101811042B1 (ko) 2015-11-18 2016-11-18 이미지 적층 처리 방법 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
TW104138056A TWI546772B (zh) 2015-11-18 2015-11-18 影像疊層處理方法與系統

Publications (2)

Publication Number Publication Date
TWI546772B true TWI546772B (zh) 2016-08-21
TW201719578A TW201719578A (zh) 2017-06-01

Family

ID=57183826

Family Applications (1)

Application Number Title Priority Date Filing Date
TW104138056A TWI546772B (zh) 2015-11-18 2015-11-18 影像疊層處理方法與系統

Country Status (5)

Country Link
US (1) US10430052B2 (zh)
EP (1) EP3171261A1 (zh)
JP (1) JP2017097872A (zh)
KR (1) KR101811042B1 (zh)
TW (1) TWI546772B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107978009A (zh) * 2016-10-24 2018-05-01 粉迷科技股份有限公司 影像叠层处理方法与系统

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10049308B1 (en) * 2017-02-21 2018-08-14 A9.Com, Inc. Synthesizing training data
USD876460S1 (en) * 2018-05-07 2020-02-25 Google Llc Display screen or portion thereof with transitional graphical user interface
CN109407861B (zh) * 2018-10-18 2021-03-05 京东方科技集团股份有限公司 主动笔、触控终端、触控画图系统、方法及可读存储介质
CN110544197A (zh) * 2019-09-04 2019-12-06 深圳传音控股股份有限公司 一种图像处理方法、装置、终端设备及介质
JP7447417B2 (ja) * 2019-09-27 2024-03-12 ソニーグループ株式会社 画像処理装置、画像処理方法、プログラム
CN113315924A (zh) * 2020-02-27 2021-08-27 北京字节跳动网络技术有限公司 图像特效处理方法及装置
US11481941B2 (en) * 2020-08-03 2022-10-25 Google Llc Display responsive communication system and method

Family Cites Families (57)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5379129A (en) * 1992-05-08 1995-01-03 Apple Computer, Inc. Method for compositing a source and destination image using a mask image
US5559950A (en) * 1994-02-02 1996-09-24 Video Lottery Technologies, Inc. Graphics processor enhancement unit
IL108957A (en) 1994-03-14 1998-09-24 Scidel Technologies Ltd Video sequence imaging system
US5732230A (en) * 1995-05-19 1998-03-24 Richo Company Ltd. Computer user interface for manipulating image fragments using drag, drop and merge operations
JPH09269999A (ja) * 1996-01-31 1997-10-14 Fuji Photo Film Co Ltd 画像合成装置および方法
US5852673A (en) * 1996-03-27 1998-12-22 Chroma Graphics, Inc. Method for general image manipulation and composition
JP3653334B2 (ja) * 1996-04-19 2005-05-25 富士写真フイルム株式会社 画像印刷装置およびシステムならびに画像ファイル装置およびシステム
US6028583A (en) * 1998-01-16 2000-02-22 Adobe Systems, Inc. Compound layers for composited image manipulation
US6031532A (en) * 1998-05-08 2000-02-29 Apple Computer, Inc. Method and apparatus for generating composite icons and composite masks
DE19963754A1 (de) * 1999-12-30 2001-07-12 Bosch Gmbh Robert Verfahren und Vorrichtung zur Anzeige von Fahrerinformationen auf einem gemeinsamen Fahrerinformationsdisplay
US6891533B1 (en) * 2000-04-11 2005-05-10 Hewlett-Packard Development Company, L.P. Compositing separately-generated three-dimensional images
WO2001080186A1 (en) * 2000-04-14 2001-10-25 Orlean Holding N.V. An improved system and method for digitally editing a composite image
US7088375B1 (en) * 2000-04-27 2006-08-08 Adobe Systems Incorporated Grouping layers in composited image manipulation
US7042467B1 (en) * 2000-05-16 2006-05-09 Adobe Systems Incorporated Compositing using multiple backdrops
US6803923B1 (en) * 2000-05-16 2004-10-12 Adobe Systems Incorporated Determining composition order from layer effects
US6734873B1 (en) * 2000-07-21 2004-05-11 Viewpoint Corporation Method and system for displaying a composited image
US7095905B1 (en) * 2000-09-08 2006-08-22 Adobe Systems Incorporated Merging images to form a panoramic image
US7559034B1 (en) * 2000-10-19 2009-07-07 DG FastChannel, Inc. Method and system for using a hyperlink, banner, or graphical icon to initiate the overlaying of an object on a window
US7006707B2 (en) * 2001-05-03 2006-02-28 Adobe Systems Incorporated Projecting images onto a surface
JP3856211B2 (ja) * 2001-12-14 2006-12-13 オムロンエンタテインメント株式会社 画像印刷装置および方法、プログラム
US7113183B1 (en) * 2002-04-25 2006-09-26 Anark Corporation Methods and systems for real-time, interactive image composition
US6828973B2 (en) * 2002-08-02 2004-12-07 Nexvisions Llc Method and system for 3-D object modeling
JP2004234549A (ja) 2003-01-31 2004-08-19 Canon Inc 現実物体モデル作成方法
US7088374B2 (en) * 2003-03-27 2006-08-08 Microsoft Corporation System and method for managing visual structure, timing, and animation in a graphics processing system
US7136075B1 (en) * 2003-08-26 2006-11-14 Adobe Systems Incorporated Compositing in the presence of different transparencies
JP2005084321A (ja) * 2003-09-08 2005-03-31 Pioneer Electronic Corp 画像処理装置、その方法、そのプログラム、および、そのプログラムを記録した記録媒体。
NZ530738A (en) * 2004-01-21 2006-11-30 Stellure Ltd Methods and systems for compositing images
US7227553B2 (en) * 2004-03-02 2007-06-05 Ulead Systems, Inc Method of digital creation of a multivision filter effect
JP4817881B2 (ja) * 2006-02-24 2011-11-16 キヤノン株式会社 画像処理方法及び画像処理装置
US8130226B2 (en) 2006-08-04 2012-03-06 Apple Inc. Framework for graphics animation and compositing operations
US8139083B2 (en) * 2006-08-09 2012-03-20 Sony Ericsson Mobile Communications Ab Custom image frames
US7889205B1 (en) * 2006-10-24 2011-02-15 Adobe Systems Incorporated Frame buffer based transparency group computation on a GPU without context switching
US8847922B1 (en) * 2007-09-04 2014-09-30 Imaging Systems Technology, Inc. Calibrating of interactive touch system for image compositing
KR20100006003A (ko) * 2008-07-08 2010-01-18 삼성전자주식회사 휴대단말기의 터치 인터페이스를 이용한 영상편집 방법 및장치
US8400470B2 (en) * 2008-08-21 2013-03-19 Genetix Corp Client side multi-component image composition
RU2421814C2 (ru) * 2009-02-20 2011-06-20 Корпорация "САМСУНГ ЭЛЕКТРОНИКС Ко., Лтд." Способ формирования составного изображения
US8847984B2 (en) * 2009-07-27 2014-09-30 Disney Enterprises, Inc. System and method for forming a composite image in a portable computing device having a dual screen display
US20110287811A1 (en) * 2010-05-21 2011-11-24 Nokia Corporation Method and apparatus for an augmented reality x-ray
US8406566B1 (en) * 2010-05-27 2013-03-26 Adobe Systems Incorporated Methods and apparatus for soft edge masking
US8885978B2 (en) * 2010-07-05 2014-11-11 Apple Inc. Operating a device to capture high dynamic range images
TWI488495B (zh) 2010-08-24 2015-06-11 Inventec Appliances Corp 可結合影像之手持式電子裝置及其方法
US8649592B2 (en) * 2010-08-30 2014-02-11 University Of Illinois At Urbana-Champaign System for background subtraction with 3D camera
US20120092357A1 (en) * 2010-10-14 2012-04-19 Microsoft Corporation Region-Based Image Manipulation
EP2458877A1 (en) 2010-11-26 2012-05-30 Thomson Licensing Occlusion layer extension
US8823745B2 (en) * 2011-06-02 2014-09-02 Yoostar Entertainment Group, Inc. Image processing based on depth information and color data of a scene
JP5145444B2 (ja) 2011-06-27 2013-02-20 株式会社コナミデジタルエンタテインメント 画像処理装置、画像処理装置の制御方法、及びプログラム
JP5375897B2 (ja) * 2011-08-25 2013-12-25 カシオ計算機株式会社 画像生成方法、画像生成装置及びプログラム
CN104106078B (zh) * 2012-01-09 2017-07-14 高通股份有限公司 光学字符辨识(ocr)高速缓冲存储器更新
US9098922B2 (en) * 2012-06-06 2015-08-04 Apple Inc. Adaptive image blending operations
US9208819B1 (en) * 2012-06-20 2015-12-08 Google Inc. Dynamic split-frame preview of video editing effects
US8970601B1 (en) * 2012-08-31 2015-03-03 Kabam, Inc. System and method for generating, transmitting, and/or presenting an animation sequence
US20140269930A1 (en) * 2013-03-14 2014-09-18 Comcast Cable Communications, Llc Efficient compositing of multiple video transmissions into a single session
US9355486B2 (en) * 2013-04-24 2016-05-31 Morpho, Inc. Image compositing device and image compositing method
JP5968533B2 (ja) * 2013-05-31 2016-08-10 三菱電機株式会社 画像処理装置、画像処理システム及び画像処理方法
JP5610327B1 (ja) * 2014-03-18 2014-10-22 株式会社Ｌｉｖｅ２Ｄ 画像処理装置、画像処理方法及びプログラム
US10474345B2 (en) * 2014-04-04 2019-11-12 Shawn SHEY User interfaces and methods for displaying content
US9531952B2 (en) * 2015-03-27 2016-12-27 Google Inc. Expanding the field of view of photograph

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107978009A (zh) * 2016-10-24 2018-05-01 粉迷科技股份有限公司 影像叠层处理方法与系统

Also Published As

Publication number Publication date
JP2017097872A (ja) 2017-06-01
TW201719578A (zh) 2017-06-01
KR101811042B1 (ko) 2017-12-20
US20170139573A1 (en) 2017-05-18
EP3171261A1 (en) 2017-05-24
KR20170058311A (ko) 2017-05-26
US10430052B2 (en) 2019-10-01

Similar Documents

Publication Publication Date Title
TWI546772B (zh) 影像疊層處理方法與系統
US20220084279A1 (en) Methods for manipulating objects in an environment
Reipschläger et al. Designar: Immersive 3d-modeling combining augmented reality with interactive displays
KR102638526B1 (ko) 파라미터를 갖는 마커를 사용한 증강 현실의 장면 수정
US10963140B2 (en) Augmented reality experience creation via tapping virtual surfaces in augmented reality
US8007110B2 (en) Projector system employing depth perception to detect speaker position and gestures
US7663620B2 (en) Accessing 2D graphic content using axonometric layer views
JP4796194B1 (ja) カーソルの表示方法およびカーソルの表示プログラム
US10467791B2 (en) Motion edit method and apparatus for articulated object
JP2011048586A (ja) 画像処理装置および画像処理方法、並びにプログラム
Ienaga et al. First deployment of diminished reality for anatomy education
US8938131B1 (en) Apparatus and method for registration of flat panel display device and imaging sensor, and electronic device having flat panel display device and imaging sensor which are registered using the method
JP2013008257A (ja) 画像合成プログラム
CN109461215B (zh) 角色插画的生成方法、装置、计算机设备及存储介质
JP6893349B2 (ja) アニメーション制作システム、アニメーション制作方法、及びプログラム
US9959637B2 (en) Method and apparatus for processing border of computer figure to be merged into background image
CN107978009A (zh) 影像叠层处理方法与系统
KR101588409B1 (ko) 마커를 이용하여 표출되는 증강 현실 객체에 대한 입체 사운드 제공 방법
EP3714351B1 (en) Method and head-mounted device for assisting a colorist in color grading a virtual reality video content , and system for color grading a virtual reality video content
JP2007102099A (ja) 電子機器、画像処理方法及びプログラム
JP2022502771A (ja) 基材、コーティングされた物品、絶縁ガラスユニット、及び／又は同様のもののための拡張現実システム及び方法
JP6180587B1 (ja) ２つの画像を対応づける方法、及びプログラム
JP4984257B2 (ja) 会場設営シミュレーション装置、プログラム、媒体、簡易な画像変形合成方法
Tran et al. A hand gesture recognition library for a 3D viewer supported by kinect's depth sensor
JP2013016144A (ja) 編集指向の動画像表示方法及びそのプログラム