行政院國家科學委員會專題研究計畫 成果報告
高互動性多媒體網站技術(二) 研究成果報告(精簡版)
計 畫 類 別 ： 個別型
計 畫 編 號 ： NSC 97-2221-E-011-093-
執 行 期 間 ： 97 年 08 月 01 日至 98 年 07 月 31 日 執 行 單 位 ： 國立臺灣科技大學資訊工程系
計 畫 主 持 人 ： 林彥君
計畫參與人員： 碩士班研究生-兼任助理人員：呂驊庭 碩士班研究生-兼任助理人員：謝怡芳 碩士班研究生-兼任助理人員：張瑞啟 博士班研究生-兼任助理人員：王祥安
報 告 附 件 ： 出席國際會議研究心得報告及發表論文
處 理 方 式 ： 本計畫可公開查詢
中 華 民 國 98 年 09 月 07 日
行政院國家科學委員會專題研究計畫成果報告 行政院國家科學委員會專題研究計畫成果報告 行政院國家科學委員會專題研究計畫成果報告 行政院國家科學委員會專題研究計畫成果報告
高互動性多媒體網站技術 高互動性多媒體網站技術 高互動性多媒體網站技術
高互動性多媒體網站技術((((二二二二)))) 計畫編號：NSC 97-2221-E-011-093 執行期限：97 年 8 月 1 日至 98 年 7 月 31 日
主持人：林彥君教授 國立台灣科技大學 資訊工程系 計畫參與人員：王祥安、呂驊庭、謝怡芳、張瑞啟
一 一 一
一、、、摘要、摘要摘要摘要
本計畫發展線上影音編輯與影像編輯技 術。影音編輯讓使用者可以截取影音、合併 影音、加入圖片與音訊的內容，以產生出新 的數位影音檔案。影像編輯可以讓使用者對 影像進行剪貼與特效處理，以產生新的數位 影像。我們改良 Poisson matting 演算法計算 出前景值與背景值的方法。這些技術可經由 blog 網站讓使用者在網路上編輯與分享多媒 體內容。
關鍵詞關鍵詞
關鍵詞關鍵詞：多媒體 blog、影音編輯、影像編輯 Abstract
Abstract Abstract Abstract
We developed and implemented video editing and image editing techniques. Users can perform these functions via a Web browser.
The functions can be integrated into a multimedia blog to enrich the sharing of multimedia contents.
Keywords Keywords Keywords
Keywords: Multimedia blog, Video editing, Image editing
二 二 二
二、、、計畫緣由與目的、計畫緣由與目的計畫緣由與目的計畫緣由與目的
Blog 是近年來網際網路上很熱門的一種 網站應用。在 blog 網站上，使用者可以創作 內容，並與其他人討論及分享。由於它簡單 易用，吸引了大量使用者，並產生出大量的 數位內容。目前圖片與影音 blog 網站快速成 長，如 Flickr、Youtube，透過多樣化的呈現 方式，讓內容更加豐富，更容易表達使用者
的想法。
多媒體 blog 是目前發展的主要趨勢，但 目前的 blog 網站在內容創作與編輯的功能上 仍有不足。大部分的 blog 網站只能讓使用者 上傳已經編輯好的內容，無法讓使用者在網 站上進行線上編輯。少部分提供線上編輯服 務的 blog 網站，編輯功能也不夠完備，使用 者在多媒體資料的創作上有諸多限制。因 此，本研究的主要目標是發展高互動性的網 站技術，以增加 blog 網站多媒體內容創作與 編輯的功能，讓使用者可以透過網路以圖 片、聲音、影片等多媒體素材，創作出極豐 富的內容。
三 三三
三、、、、結果與討論結果與討論結果與討論結果與討論
完成的功能可分為影音編輯、影像編 輯、blog 三部分。其中，我們將影音編輯的 工 具 取 名 為 NTUST Online Video Editing Tools (NOVET) ， 影 像 編 輯 的 工 具 取 名 為 Online Photo Editor of NTUST (OPEN)；它們 分別包含操作介面、網站伺服器、資料庫系 統三個部分。例如，NOVET 包含：
操作介面：負責呈現使用者的操作介 面。透過瀏覽器即可操作影音編輯功能。
網站伺服器：負責接收與處理使用者的 請求。
資料庫系統：負責儲存、管理使用者的 帳戶資料，圖片、影音檔案及其相關資 訊。
以下針對影音編輯功能、影像編輯功 能、blog 功能，分別說明如下：
(((
(一一一)一))) 影音編輯影音編輯影音編輯影音編輯
NOVET 提供檔案上傳、影片編輯、加入 音訊、影片錄製、影音發佈、轉換格式六項 主要功能，說明如下：
(1) 檔案上傳：提供上傳影音、圖片、音訊至 網站伺服器。目前支援上傳的影音格式有 AVI, MOV, MP4, MPEG, 3GP, WMV 等；支援上傳的圖片格式有 JPG, BMP；
支援上傳的音訊格式有 WMA, MP3。
(2) 影片編輯：此功能分為截取影片與合併影 片兩部分。在截取影片方面，使用者可以 設定欲截取的開始及結束時間點，取出該 片段作為編輯素材。在合併影片方面，使 用者可選擇多個影片及圖片，讓它們能依 序合併成一個影片檔案。
(3) 加入音訊：使用者可以選擇任意一段音 訊，並將其加入影片中的任意時間點。首 先，音訊的來源可選擇 NOVET 資料庫中 的音訊、使用麥克風錄下音訊、取出影片 中的音訊。接著，從該音訊截取出欲加入 影片的片段。最後，選擇是否要直接取代 影片音訊、僅取代影片音訊的部分片段、
或是與影片音訊混合。
(4) 影音錄製：若使用者的電腦配有 Webcam 與麥克風，就可以直接透過瀏覽器在線上
錄製新的影音內容。
(5) 影音發佈：讓使用者可以發佈包含影音內 容的文章至部落格。
(6) 轉換格式：讓使用者取回在網站上所創作 的內容，以方便進行資料的備份與再利 用。我們提供 AVI, MOV, MP4, MPEG-1, WMV, FLV 六種影音格式供使用者選擇 轉換，並下載至個人用戶端電腦。
為了顯示本部分主要成果的特點，我們與 其他線上影音編輯網站比較，如表 1 所示。
在影片編輯方面，目前網站都可做到截取影 片和合併影片；目前只有 International Remix 無法加入圖片。在加入音訊方面，只有 JayCut 與 NOVET 可以將音訊加入影片的任意時間 點；只有 NOVET 可以截取音訊加入至影片。
在錄製影片及音訊方面，只有 NOVET 可讓 使用者透過瀏覽器線上錄製影片及音訊的素 材。在轉換格式方面，JayCut 僅提供 WMV 影音格式；One True Media 提供 MOV 與 MP4 兩種格式；NOVET 則有 AVI, MOV, MP4, MPEG-1, WMV, FLV 六種格式供使用者選 擇。目前 One True Media、Photobucket、
NOVET 可以將影音內容發佈至部落格上。
表 1. 線上影音編輯的功能比較 JayCut [1] International
Remix [2]
One True Media [3]
Photobucket
[4] NOVET
截取影片 可 可 可 可 可
合併影片 可 可 可 可 可
影片
編輯 加入圖片 可 不可 可 可 可
可否加入 可 可 可 可 可
加入任意
時間點 可 不可 不可 不可 可
加入
音訊 加入任意
音訊片段 不可 不可 不可 不可 可
錄製影片和音訊 不可 不可 不可 不可 可
轉換格式 不可 不可 不可 不可 可
發佈影音至部落格 可 不可 可 不可 可
網站 功能
( ((
(二二二二) ) ) ) 影像編輯影像編輯影像編輯 影像編輯
OPEN 具有檔案管理、影像編輯、特效、
裁出影像 4 項主要功能，說明如下：
(1) 檔案管理：使用者可以編輯電腦上的影像 或伺服器中的影像，也可選擇開啟新檔案 來編輯。編輯完成後，使用者可以選擇儲 存到電腦，或是直接發佈到部落格。
(2) 影像編輯提供畫筆、線段、圓形、矩形、
油漆桶、局部特效畫筆、拖曳、複製、貼 上 9 種功能。
(3) 特效提供模糊、灰階、亮度、邊緣、負片、
銳化、浮雕、針織、毛玻璃、水彩、水波、
吹風、調整顏色 13 種特效。
(4) 裁出影像提供矩形裁剪、套索、NIM 工 具。其中 NIM 工具為影像編輯器中主要 的工具，它的特點為在描邊的同時就可 分析出前景邊緣的細長毛髮形狀。
為了顯示本部分主要成果的特點，我們 針對幾個功能較完整的線上影像編輯系統，
和本研究成果比較，如表 2 所示。本研究改 良了 Poisson Matting 演算法[5]計算出前景值 與背景值的方法。我們實驗了平均值、最短 距離、加權平均三種方法[6]。能即時得到精 細的影像擷取效果[7]。
( ((
(三三三三)))) Blog
Blog 部份主要提供撰寫、管理、設計以 及外掛程式等功能。
(1) 撰寫：讓使用者在 blog 上發佈新文章，
並設定文章要公開還是隱藏，以及決定文 章的分類。
(2) 管理：讓使用者修改或刪除先前發佈的文 章內容、文章分類、友情連結和搜尋標 籤，並可管理別人對文章發表的評論。
(3) 設計：讓使用者設計 blog 的版面風格。
(4) 外掛程式：外掛程式是應用功能的擴展。
我們使用了 NextGEN Gallery [13]外掛程 式，它可以讓 blog 網站具有相簿功能。
將 NextGen Gallery 與我們的影像編輯功 能整合，可以讓編輯後的影像更容易以相 簿方式呈現與管理。
四四四
四、、、、計畫成果自評計畫成果自評計畫成果自評計畫成果自評
本研究內容包含影音、影像編輯，符合 原計畫，有達成預期目標。影像擷取技術所 使用的改良式 Poisson Matting 演算法，研究 成果具有學術價值。影音編輯技術中的裁切 音訊加入至影片、選擇影片中任意時間點加 入音訊及線上錄製影音皆具有應用價值。我 們已在第五屆知識社群研討會發表兩篇論文 [7, 14]，並產生兩篇碩士論文[6, 15]，未來也
表 2. 線上影像編輯的功能比較 編輯器
功能 Picnik [8]
Photoshop Express
[9]
Splashup
[10] Aviary [11] FotoFlexer
[12] OPEN 特效 33 種 6 種 15 種 13 種 23 種 13 種 編輯多張影像 不可 不可 可 可 可 可
一般裁剪 不可 不可 可 可 不可 可
智慧型擷取 不可 不可 不可 可 可 可
可在學術期刊發表。
五五
五五、、、參考文獻、參考文獻參考文獻參考文獻
[1] JayCut, Edit your moives on JayCut, http://jaycut.com/.
[2] P. Schmitz, P. Shafton, R. Shaw, S.
Tripodi, B. Williams, and J. Yang, International Remix: video editing for the Web, in Proc. of 14th Annual ACM International Conference on Multimedia, Santa Barbara, CA, 2006, pp. 797-798.
[3] One True Media, Your life, perfectly mixed, http://www.onetruemedia.com/.
[4] Photobucket, Image hosting, free photo sharing and video sharing at Photobucket, http://photobucket.com/.
[5] J. Sun, J. Jia, C.-K. Tang, and H.-Y.
Shum, Poisson matting, ACM Transactions on Graphics, Vol. 23, No.
3, 2004, pp. 315-321.
[6] 謝怡芳, OPEN 線上影像編輯器, 碩士 論文, 國立台灣科技大學資訊工程系, 台北市, 2009.
[7] 謝怡芳, 林彥君, 王祥安, OPEN 線上 影像編輯器, in 第五屆知識社群研討 會 論 文 全 集, 台 北 市 , 2009, Article 30-08.
[8] Picnik, Photo editing made fun, http://www.picnik.com/.
[9] Adobe, Photoshop Express, https://www.photoshop.com/express/lan ding.html.
[10] Splashup, Jump right in, http://www.splashup.com/.
[11] Aviary, http://a.viary.com/home.
[12] FotoFlexer, The world's most advanced online photo editor, http://fotoflexer.com/.
[13] NextGEN Gallery,
http://alexrabe.boelinger.com/wordpress -plugins/nextgen-gallery/.
[14] 呂驊庭, 林彥君, 王祥安, NOVET 線 上影音編輯工具, in 第五屆知識社群 研 討 會 論 文 全 集, 台 北 市 , 2009, Article 30-06.
[15] 呂驊庭, NOVET 線上影音編輯工具,
碩士論文, 國立台灣科技大學資訊工 程系, 台北市, 2009.
附件一 附件一 附件一 附件一
NOVET 線上影音編輯工具 線上影音編輯工具 線上影音編輯工具 線上影音編輯工具
發表於 發表於 發表於
發表於 2009 年年年 5 月年 月月月 第五屆知識社群研討會
第五屆知識社群研討會 第五屆知識社群研討會
第五屆知識社群研討會論文全集論文全集論文全集論文全集，，，，Article 30-06，，，，台北市台北市台北市 台北市
NOVET 線上影音編輯工具線上影音編輯工具線上影音編輯工具線上影音編輯工具
呂驊庭 林彥君 王祥安
台灣科技大學資訊工程系 {M9515022, y.lin, D9215004}@mail.ntust.edu.tw
摘要 摘要 摘要 摘要
影音部落格是部落格目前發展的主要趨勢。但目前大多數的影音部落格僅提供平台讓使 用者上傳分享影音，在影音內容的創作與編輯方面，並沒有具備較完善的功能。我們發 展的影音編輯技術讓使用者能在線上編輯視訊和音訊，創作出具有個人風格的影音內 容。此技術與部落格整合，使用者便可在部落格上分享所創作的作品。Web 的使用方式 會因此變得更加多元化，資訊內容也因為使用者的參與分享變得更為豐富。
關鍵字：影音部落格、影音編輯
Abstract
More and more blogs are providing basic video sharing, but lack advanced video functionality.
We developed and implemented some advanced video editing techniques, such as adding audio contents to a video. Users can thus edit videos and audios via a Web browser. These editing functions can be integrated into a blog to enrich the multimedia contents.
Keywords: Video blog, Video editing
NOVET線上影音編輯工具線上影音編輯工具線上影音編輯工具線上影音編輯工具 1. 緒論緒論緒論 緒論
部落格是近年來網際網路上很熱門的一種網站應用。在部落格網站上，使用者可以創作 內容，並與其他人討論及分享。由於它簡單易用，吸引了大量使用者，並產生出大量的數位 內容。目前影音部落格網站快速成長，如 YouTube、I’m TV [3]等。透過多媒體的呈現，可讓 內容更加豐富，更容易表達使用者的想法。然而，目前大部分的影音部落格網站只能讓使用 者上傳分享影音內容，無法進行線上編輯。少部分提供線上編輯服務的影音網站，在將音訊 加入影片方面的功能尚有不足。
線上影音的相關應用大致上分為三類：影音下載、線上影音編輯、線上錄製影音。影音 下載能轉換線上影音的檔案格式並下載。線上影音編輯是針對線上影音的內容編輯，如截取 片段、合併多個片段等。線上錄製影音是以網路攝影機(Webcam)與麥克風透過瀏覽器錄製影 音。
影音下載系統中，Boudier與Shotton的VIDOS [2]能夠讓使用者取得在網路上的任何空間 裡影音檔案，只要該檔案是允許被使用者下載的。使用者可依照自己的需求改變檔案的格式、
畫 面 速 率 (frame rate)等規格後再下載至客戶端。線上影音編輯系統中，Schmitz等人的 International Remix [8]可讓一般使用者編輯製作影音內容，雖提供修剪與合併影片的編輯功 能，但是每一影片只可加入一個音訊作為背景音樂。其他類似的網站有Jumpcut [4]、One True Media [5]等。One True Media除了可以線上編輯影音，還提供付費使用者下載編輯後的影音內 容。陳偉等人建構出的網路視訊部落格系統[10]，是使用串流媒體技術建構出以視訊服務為 主的部落格，其目的是以影音的方式來呈現自我特色。使用者可直接在線上錄製影音，並將 錄製內容發佈及分享在該部落格上。其他類似的部落格網站有I’m TV [3]。
我們發展高互動性的線上影音(online videos)編輯技術，以增加部落格網站中影音內容的 創作與編輯功能。我們可選取任意長度的音訊加入影片，且加入影片中的任意時間點。同時 也實現了線上錄影錄音的功能，並可將錄製的影音內容作為編輯素材以重複使用。我們將這 些技術與部落格整合成為一個線上影音編輯的平台，名為NTUST Online Video Editing Tools (NOVET)。
本論文第2節會介紹NOVET的實作架構。第3節介紹NOVET上的各項影音編輯功能。第4 節說明NOVET與其他網站比較的結果。第5節為結論。
2. NOVET架構架構架構架構
NOVET 包含了部落格平台和線上影音編輯工具。在部落格平台方面，我們採用開放源碼 的 WordPress MU [7]軟體來架設，並與我們的影音編輯工具整合。Wordpress MU 是使用率較 高的部落格軟體，已具備了部落格網站應有的基本功能，可以省去建置部落格平台的時間。
在影音編輯工具方面，我們以 Adobe Flash 軟體來發展影音編輯的操作介面。主要原因是 Flash 具有呈現影音多媒體的能力，且可以在大部分的瀏覽器中使用。此外，Flash 具有許多 與使用者互動的機制，在瀏覽器上的操作如同操作桌面軟體一般，能有即時的互動。
NOVET 採用三層式架構實作，分別為用戶端操作介面、網站伺服器、資料庫三個部分，
系統架構如圖 1 所示。用戶端的操作介面讓使用者可透過瀏覽器操作 NOVET 的影音編輯功 能。此外，若用戶端有網路攝影機與麥克風，也可透過操作介面向網站伺服器提出線上錄製
影片或音訊的請求。
網站伺服器負責接收與處理用戶端的各項編輯請求，並執行對應的影音編輯處理。伺服 器端包含了串流媒體伺服器軟體 Flash Media Server [1]和網頁伺服器軟體 Apache Server。Flash Media Server 用來實作線上錄製影音的功能。Apache Server 則負責部落格功能和各項影音編 輯功能，這兩個功能是透過 XML-RPC [9]的方式整合。此外，網站伺服器也扮演用戶端與資 料庫間的橋樑，將使用者上傳或編輯的影音內容儲存至資料庫，以及取得資料庫中的影音內 容傳送至操作介面。
在資料庫方面，我們使用資料庫管理系統MySQL [6]。它負責儲存使用者的帳戶資料、影 音檔案等的相關資訊。
圖 1 NOVET 的架構
3. NOVET的功能的功能的功能的功能
本節介紹NOVET的影音編輯功能，包含加入音訊、錄製、截取、合併等功能。3.1節介紹 加入音訊至影片的新功能，並說明其操作方式。3.2節介紹新的影音錄製功能，並說明錄製時 的使用情形。為了功能的完整性，NOVET上也有截取、合併影片功能，將於3.3節介紹。3.4 節介紹將影音內容發佈至部落格、轉換影音檔案的格式等功能。
3.1 加入音訊加入音訊加入音訊加入音訊
加入音訊的功能讓使用者可以把任意音訊加入影片中，做為旁白或背景音樂。比起其他 在線上加入音訊至影片的功能來說，NOVET的新功能在於可以加入任意一段的音訊，並可加 入於影片中任意的時間點。
加入音訊的操作介面如圖2所示，它的左半邊由上而下有影片播放區、Add Audio at Time 時間設定欄位、搜尋滑桿、三角形狀的時間標記。影片播放區是播放使用者所選擇的影片內 容。時間設定欄位是設定加入的音訊在影片中開始播放的時間點。搜尋滑桿是用來選擇影片 播放的時間點。三角形狀的時間標記可左右拖曳，以設定加入音訊的播放時間點。設定時間 的方式有以下兩種。第一種是當影片播放到欲加入音訊的時間點時，按下時間設定欄位右邊 的Get Time按鈕，該時間點就會被設定在時間設定欄位上。第二種則是拖曳三角形狀的時間 標記來設定欲加入音訊的時間點。在使用者拖曳時間標記的同時，播放區也會呈現該時間點 上的影片畫面。
圖2 影音編輯操作介面
操作介面的右半邊共有Select Audio Source、Specify Start and End Times、Method to Process Audio三個設定項目。Select Audio Source項目是選取欲與影片結合的音訊檔案，它的下方有 Select、Extract from Video、Record三個按鈕。Select是讓使用者選取NOVET資料庫中的音訊 檔案。Extract from Video讓使用者可取出影片中的音訊，並將其儲存至NOVET資料庫。Record 是讓使用者透過麥克風線上錄製音訊。在開始錄製音訊前，可先將上述三角形狀的時間標記 拖曳到欲配音的時間點。開始錄製時，影片播放區會播放影片內容，讓使用者能夠同時觀看 影片內容並作適當的配音。
經過選取或錄製音訊的步驟後，音訊的資料會載入操作介面，結果如圖3所示。音訊名稱 會顯示在Select Audio Source右邊，而其播放時間點和總長度會顯示在下面Time文字的右邊。
Time文字的下方是音訊的搜尋滑桿；而按下Hear Your Selection按鈕會開始播放音訊內容。
Specify Start and End Times項目是設定音訊的開始和結束時間點，共有以下兩種設定方 式。第一種是利用時間標記來設定時間。音訊搜尋滑桿的左右兩側各有一個三角形圖示，分 別代表開始和結束時間點的時間標記。使用者可以分別拖曳這兩個時間標記，選定欲加入的 音訊片段即完成設定。第二種則是當音訊播放到欲開始的時間點時，按下Get Start Time按鈕，
該時間點就會被設定在Start Time欄位上；當音訊繼續播放到欲結束的時間點時，則按下Get End Time按鈕，該時間點就會被設定在End Time欄位上。
圖3 將音訊的資料載入操作介面
圖 3 右 下 方 的 Method to Process Audio 項 目 是 選 擇 處理音訊的方法，共有Mix with Original、Remove Original、Replace a portion of Original三種選擇。Mix with Original是將加入 的音訊與影片音訊混合，則處理後的影片可聽到加入的音訊與影片音訊重疊。Remove Original 是由加入的音訊直接取代影片音訊，則處理後的影片裡只會聽到加入的音訊而沒有影片音 訊。Replace a portion of Original是以加入的音訊取代影片音訊的部分片段，則處理後的影片 在被取代音訊的部分只會聽到加入的音訊，其他時間仍維持影片音訊。此外，NOVET會自動 比較影片與音訊片段的時間長度。若加入的音訊片段，它的時間長度比影片長度短，則會讓 使用者選擇是否要循環播放音訊；若加入的音訊片段比影片長度長，NOVET會自動將音訊裁 切至與影片等長。
上述的項目都設定完成後，按下操作介面右下角的View Result按鈕可預覽編輯後的效 果；按下Execute按鈕，可將上述的各項編輯參數送到伺服器端處理，產生出新的影片。
3.2 影音錄製影音錄製影音錄製影音錄製
NOVET提供使用者透過Webcam線上錄製影音檔案，錄製完成的檔案會直接存放在伺服 器端的資料庫中，讓使用者能夠繼續在NOVET上編輯該檔案。
錄製影音的操作介面，如圖4所示。圖中左邊的方框用來顯示Webcam所拍攝到的畫面；
右邊的方框用來播放錄製完成的影音內容。若沒有錄音設備，亦可只錄製影像。使用者按下 Record按鈕後就會開始錄製影音，此時Record按鈕會變成Stop按鈕，按下Stop按鈕就會停止錄 製。結束錄製後，點選右邊方框下面的Play按鈕，就會開始播放剛才錄製的內容，如圖5所示。
圖中右下方的Title欄位是讓使用者輸入自訂的檔案名稱。錄製完成後，輸入檔案名稱再按下 Save按鈕，即可將錄製完成的影音檔案儲存至NOVET資料庫中。
圖4 影音錄製功能的操作介面
圖5 錄製完成後，播放錄製結果的畫面
3.3 截取截取截取截取與合併影片與合併影片與合併影片與合併影片
截取影片的功能讓使用者可從影片內容中截取出任意片段。它是根據使用者指定的開始 和結束時間點來截取影片。截取影片的操作介面，如圖6所示。畫面中Specify Start and End Times的上方有影片播放器，其下方有時間設定欄位，再往下為搜尋滑桿。搜尋滑桿的左右兩 側各有一個可拖曳的三角形，分別代表開始和結束時間點的時間標記。
使用者有兩種方式可以設定截取影片的開始和結束時間點。第一種是當影片播放到欲截 取的開始時間點時，點選圖6中的Get Start Time按鈕即為設定開始時間；當影片繼續播放到欲 結束的時間點時，按下Get End Time按鈕即為設定結束時間。第二種方式則是使用搜尋滑桿兩 側的時間標記。使用者可以分別拖曳開始和結束的時間標記，選取出要截取的影片片段即完 成設定。在使用者拖曳時間標記的同時，播放區也會呈現該時間點上的影片畫面。設定完開 始和結束時間點後，按下View Result按鈕即可預覽截取的影片片段；按下Execute按鈕，可將 設定的開始和結束時間點送到伺服器端處理，截取出的影片片段為新的影片檔案。
圖6 截取影片的操作介面
接下來介紹合併影片功能。合併影片是根據使用者所選取且排序好的多個影片，結合成 一個影片檔案。合併影片的操作介面如圖7所示。畫面的左半部為影片播放區，畫面的右半部 有兩個列表。左邊列表會顯示可以合併的影片名稱；右邊列表則是用來排列合併影片的順序，
伺服器端會依此列表由上至下的順序合併影片。當使用者點選左右任一列表中的影片名稱 時，影片播放區都會播放該影片的內容。
使用者先點選圖7左邊列表中任一個或多個影片，再按下兩個列表中間的選取增加按鈕，
則選取的影片會加入右邊列表。預設的增加方式，是將影片增加在右邊列表的最後面。如果 要選擇加入影片的順序，則先點選右邊列表中任一影片，之後再按下選取增加按鈕，則欲合 併的影片就會接在剛點選的影片的後面。若要移除右邊列表中的影片，則先點選該影片，再 按列表下方的Remove按鈕即可。右邊列表排序完成後，按下View Result即可預覽影片合併的 結果；按下Execute按鈕，伺服器端就會開始依序將檔案合併，產生出新的影片。
圖7 合併影片的操作介面
3.4 影音轉檔與發佈影音轉檔與發佈影音轉檔與發佈影音轉檔與發佈
NOVET可以讓使用者把影片轉換成不同檔案格式，並下載至用戶端的電腦，以方便進行 影片的備份與再利用。目前NOVET可以轉換的影片格式有AVI, MOV, MP4, MPEG-1, WMV, FLV。使用者選擇好欲下載的檔案格式後，就可交由伺服器端轉檔。一旦檔案格式轉換好後，
就可以讓使用者將檔案儲存至用戶端電腦上。
除了讓使用者下載影片至用戶端之外，NOVET還提供發佈影音的功能。使用者可以發佈 一篇包含影音內容的文章至部落格上。發佈影音的操作介面，如圖8所示。使用者可輸入文章 的標題與內容，並從Category的下拉式選單中選擇分類。若不作分類可選擇Uncategorized。若 要新增分類，可點選該選單中的New Category，並輸入新的分類名稱。使用者設定完成後，
按下Publish按鈕即可將包含影音內容的文章發佈至部落格中。發佈的結果如圖9所示，從上而 下分別顯示了文章標題、發佈日期、發佈者名稱、文章內容、影音內容，以及該篇文章的分 類等。影音內容可以直接在該文章頁面中播放。
圖8 發佈文章的操作介面
圖9 影音內容發佈結果
4. 與其他網站比較與其他網站比較與其他網站比較 與其他網站比較
我們測試了多個提供線上編輯的影音部落格網站，並將功能較完整的網站與 NOVET 比 較，如表 1 所示。在編輯影片方面，NOVET 與大部分的編輯網站都已做到合併及截取檔案。
在將音訊加入影片的編輯方面，分成是否能加入音訊、能選擇任意時間點加入、能選取任意 片段音訊加入三個項目。表 1 列出的所有網站都能加入音訊，但只有 Jumpcut [4]和 NOVET 可以選擇影片中的任意時間點加入。此功能可讓使用者根據影片的內容來適當的加入音訊。
只有 NOVET 可以指定音訊的開始及結束時間點，以選取出任意長度音訊加入至影片。這樣 一來，若使用者想加入的聲音不在音訊檔案的最前面，亦能輕易的選取欲加入的片段。
在線上錄製影片方面，目前只有 I’m TV 和 NOVET 有提供此功能。但由於 I’m Vlog 沒有 提供截取、合併檔案等功能，因此對於錄製完成的影片無法再進行編輯。在線上錄製音訊方 面，目前只有 NOVET 具有此功能，讓使用者可以直接在線上錄製配音。在轉換檔案格式及 下載和發佈影音內容至部落格這兩個項目上，目前也只有 One True Media [5]和 NOVET 可以 做到。由此可見，NOVET 的線上影音編輯功能優於目前其他的線上影音編輯網站。
5. 結論結論結論 結論
NOVET有一些目前別人所沒有的新功能。在將音訊加入影片的技術上，我們可以將音訊 加入至任意時間點，並可讓使用者選取某一段的音訊加入影片。影片和音訊的來源，除了上 傳至網站的方式以外，還可使用網路攝影機和麥克風透過瀏覽器來錄製。錄製的內容直接儲 存於伺服器端，讓使用者能夠繼續編輯這些素材。我們加入的這些新功能可讓使用者在編輯 上有更多的選擇，並能夠進一步創作出更豐富的影音內容。此外，我們將NOVET整合於部落 格中，使用者便可以很容易的發佈與分享自己創作的影音內容。
表 1 線上影音編輯網站的功能比較 Jumpcut
[4]
International Remix [8]
One True
Media [5] I’m TV [3] NOVET
合併檔案 可 可 可 不可 可
編輯
影片 截取檔案 可 可 可 不可 可
是否能加入音訊 可 可 可 可 可
是否能選擇任意時間
點加入 可 不可 不可 不可 可
將音訊 加入影 片的編
輯 是否能選取任意片段
音訊加入 不可 不可 不可 不可 可
線上錄製影片 不可 不可 不可 可 可
線上錄製音訊 不可 不可 不可 不可 可
轉換檔案格式及下載 不可 不可 可 不可 可
發佈影音內容至部落格 不可 不可 可 不可 可
致謝致謝 致謝致謝
本研究接受國科會編號NSC 96-2221-E-011-161及NSC 97-2221-E-011-093研究計畫補助部分經費。
編輯功能
網站
參考文獻參考文獻 參考文獻參考文獻
[1] Adobe, Flash Media Server resources, http://www.adobe.com/support/documentation/en/flashmediaserver/.
[2] T. Boudier and D. M. Shotton, VIDOS, a system for video editing and format conversion over the Internet, Computer Networks, Vol. 34, No. 6, 2000, pp. 931-944.
[3] IMTV, 用 I'MTV 創造自己, http://www.im.tv/Vlog/.
[4] Jumpcut, The easiest way to upload, edit, and share your video and photos, http://jumpcut.com/.
[5] One True Media, Your life, perfectly mixed, http://www.onetruemedia.com/.
[6] Sun Microsystems, MySQL, http://www.mysql.com/.
[7] M. Mullenweg, R. Boren, and D. O. Caoimh, WordPress MU, http://mu.wordpress.org/.
[8] P. Schmitz, P. Shafton, R. Shaw, S. Tripodi, B. Williams, and J. Yang, International Remix: video editing for the Web, in Proc. of 14th Annual ACM International Conference on Multimedia, Santa Barbara, CA, 2006, pp.
797-798.
[9] User Software, XML-RPC Home Page, http://www.xmlrpc.com/.
[10] 陳偉, 林憲良, and 王曉慧, 網路視訊部落格製作與應用, in 網路社會學通訊期刊, vol. 64, 2007.
附件二 附件二 附件二 附件二
OPEN 線上影像編輯器 線上影像編輯器 線上影像編輯器 線上影像編輯器
發表於 發表於 發表於
發表於 2009 年年年 5 月年 月月月 第五屆知識社群研討會
第五屆知識社群研討會 第五屆知識社群研討會
第五屆知識社群研討會論文全集論文全集論文全集論文全集，，，，Article 30-08，，，，台北市台北市台北市 台北市
OPEN 線上影像編輯器線上影像編輯器線上影像編輯器線上影像編輯器
謝怡芳 林彥君 王祥安
臺灣科技大學資訊工程系 {M9515012, y.lin, D9215004}@mail.ntust.edu.tw
摘要 摘要摘要 摘要
本研究介紹新的互動式線上影像擷取技術，名為 NTUST Image Matting (NIM)。跟其它線上版 的影像裁剪工具比較，其特點為不必描完前景邊緣，就能在描前景邊緣的過程中，開始處理 畫筆涵蓋到的範圍，可即時呈現擷取的結果，並能擷取出邊緣有細長形狀的前景。我們將 NIM 再加上其它的影像編輯工具整合成線上影像編輯器，再跟 blog 搭配成一個影像編輯與分享的 網站，讓編輯後的影像分享更為便利。
關鍵字：多媒體blog、影像編輯、影像擷取
Abstract
We introduce NTUST Image Matting (NIM), an interactive technique for online image matting.
NIM can obtain good results when dealing with boundaries of fuzzy foreground such as hair and fur.
We also developed and implemented an image editor. Users can thus edit images via a Web browser.
These editing functions can be integrated into a blog to enrich the multimedia contents.
Keywords: Multimedia blog, Image editing, Image matting
OPEN 線上影像編輯器線上影像編輯器線上影像編輯器線上影像編輯器
1. 簡介簡介簡介 簡介
個人化的 blog 是近年來網路上很熱門的應用，透過 blog 網站，使用者可以創作內容，並 和別人分享。因為數位攝影器材及網際網路的普及，影像與影音資料的取得、儲存、傳遞都 比以前方便，所以 blog 網站的內容漸漸由文字方式轉變為以多媒體資料為主，多媒體 blog、
網路相簿也因此蔚為風行。目前許多線上影像編輯器(Web-based image editor)，它們除了提供 使用者編輯影像的功能外，也和影像分享的網站合作，使用者編輯後的影像就可直接上傳分 享。但現有的線上影像編輯器提供使用者內容創作與編輯的功能仍然不足，尤其是將影像裁 出的功能大多不夠完善，無法讓使用者擷取出較精細的影像當做編輯素材。
影像中欲裁出的部分稱為前景，其它部分稱為背景。裁出的前景可讓使用者在影像編輯 上自由運用合成到不同的背景，創造出新的影像內容，所以是很重要的影像編輯技術。將前 景裁出的技術可分為兩大類：影像裁剪(image cutout)、影像擷取(image matting)。
影像裁剪是將圖像或照片中的物體從背景裁出的技術[7, 15]。影像裁剪技術有三類：以 邊界為基礎的[6, 8]、以區域為基礎的[10]、結合前兩者優點的[7]。它無法將邊緣有細長形狀 的前景裁剪出，因此需要影像擷取的技術。
影像擷取可擷取出影像中細長的形狀，如毛髮，或有半透明的物體，如玻璃杯，在前景 內部的像素也包含了背景的顏色等此類的影像。它將影像中的像素分成三類：前景、背景、
或是前景跟背景依比例的混合，其中混合的比例為透明度(opacity) [11, 13, 14, 16, 17]。
本研究開發的互動式影像擷取技術，跟其它線上版的影像裁剪技術比較，其特點為使用 者不需仔細地描繪前景輪廓，即可擷取出邊緣有細長形狀的前景。它不需等到整個影像都描 繪完才呈現結果，能即時呈現局部影像的擷取結果，我們將此技術稱為 NTUST Image Matting (NIM)。我們的 NIM 工具與其它的影像編輯工具，如畫圖、剪貼等，整合成較完整的線上影 像編輯器，名為 Online Photo Editor of NTUST (OPEN)。OPEN 編輯器搭配 blog 即為一個影像 編輯與分享的網站，讓編輯後的影像分享更為便利，此網站也稱為 OPEN。
本論文的組織如下：第二節介紹相關研究。第三節簡介 NIM 技術。第四節介紹 OPEN 平 台的架構與功能。第五節比較 OPEN 編輯器與其它線上影像編輯器的功能。第六節為結論。
2. 相關研究相關研究相關研究 相關研究
本節介紹使用影像裁剪及影像擷取技術的工具。影像裁剪的方法有三類，第一類以邊界 為基礎的工具，如 Intelligent Scissors [8]，讓使用者大略的沿著前景邊緣，畫出封閉的曲線將 前景圍住，程式會自動讓它接近前景的輪廓。雖然使用上比使用者自己用手描邊方便，但有 時畫出的邊緣形狀和真實的前景輪廓會有些差距。因此，使用者必須小心地控制曲線，儘可 能接近要裁剪的前景邊緣。
第二類以區域為基礎的工具，如魔術棒(Magic Wand)，操作方法是用滑鼠在影像中點擊 選定前景內部一個目標點，魔術棒就會在此點周圍找空間連續且顏色相近的像素，使它們變 成同一個區塊，反覆操作將前景區域都選取後，就可將前景裁剪出。使用魔術棒必須反覆嘗 試找出適當的容忍度(tolerance)參數，要找到正確的容忍度大小是很困難的事，在有陰影、對 比不明顯的邊緣或是顏色變化很大的區域中，處理效果不佳。
第三類是結合了以邊界和以區域為基礎兩者的方法，如 Lazy Snappin [7]，它只需在影像 中加上少許的標示線，就可區分出前景、背景區域。先用區域分割的方法，初步找出前景區 域，之後再用邊線細部修正效果不好的地方。影像裁剪工具都無法將邊緣有細長形狀的前景 裁剪出，因此需要影像擷取的技術。影像擷取可擷取出影像中細長的形狀，如毛髮，目前只 有單機版的影像編輯軟體，如 Photoshop，有提供影像擷取的功能。
3. NIM簡介簡介簡介簡介
NIM 改良了 global Poisson matting [13]在前景、背景取樣的方法。它不必描完前景邊緣，
就能在描前景邊緣的過程中，開始處理畫筆涵蓋到的範圍。
NIM 的使用情形說明如下。圖 1(a)為原始影像。圖 1(b)就是開始畫的情形，使用者用 NIM 的畫筆沿著前景跟背景的交接處描邊，畫筆從影像的左下方往左上方移動，NIM 會自動在畫 筆兩側產生前景與背景標示區。以畫筆移動時的左邊是背景(黑色部分)，右邊是前景(白色部 分)，中間是待判斷區域(灰色部分)。在描邊的同時，就可分析出邊界；圖 1(c)為處理好左邊 三分之ㄧ前景邊緣的情形。當整個前景邊緣都處理完成後，如圖 1(d)所示，白色部分為前景，
黑色部份為背景。若是有處理不好的情形，如把背景區域判斷成前景，黑色部分就會出現白 點；或是前景區域判斷成背景，白色部分就會出現黑點。NIM 提供修飾的畫筆，可手動修飾。
若是已滿意處理的結果，就可將前景擷取出，並把它貼到圖 2(a)，合成為圖 2(b)。
NIM 畫筆移動的方向可分成八個，分別為上、下、左、右、左上、左下、右上、右下。
只要畫筆位置有改變，NIM 就以畫筆涵蓋到的範圍去抓取影像當做輸入。例如，若是畫筆往 上移動，向上新增加的區域才是 NIM 要處理的部分。若是畫筆往左上方移動，則向上及向左 新增的區域皆是 NIM 要處理的部分。當畫筆往其它方向移動的時候，NIM 的處理方法以此類 推。
(a) (b)
(c) (d)
圖 1 使用 NIM 時，影像在螢幕顯示的變化過程：(a)原始圖，(b)由左下角開始畫的情形，
(c)畫到左上角的情形，(d)前景分析完成
(a) (b)
圖 2 (a)原始圖及(b)將圖 1 複製出的影像貼上完成的合成圖
4. OPEN平台平台平台平台的的的架構的架構架構架構與與與與功能功能功能 功能
本節介紹 OPEN 平台的架構與功能，並說明各項功能的操作方法。
4.1 OPEN網站網站網站網站的開發工具及的開發工具及的開發工具及平台的開發工具及平台平台架構平台架構架構架構
OPEN 網站包含了 blog、相簿、OPEN 編輯器三部份。我們以開放源碼的 Wordpress [18]
軟體架設 blog，來節省建置 blog 的時間，因為 Wordpress 是以 PHP 程式語言所開發，具有跨 平台的優點，而且它安裝簡單、介面易於使用、有許多延伸的程式(plugin)可供使用者擴展功 能。另外，它為開放源碼的 blog 軟體中，使用率最高的一個，所以我們挑選它作為 OPEN 網 站的 blog 功能。在相簿方面，我們選用 Wordpress 的延伸程式 NextGEN Gallery [2]，來當做 影像分享的相簿程式。因為它具有安裝設定簡便、易於使用者操作、功能完善等優點，所以 我們以它作為 OPEN 網站的相簿功能。
在 OPEN 編輯器部分，我們以 Flash 實作它的功能。因為 Flash 是 Adobe 的 Rich Internet Application (RIA)開發環境，RIA 豐富的視覺化介面，讓網頁上的應用程式，可具備傳統桌面 軟體的行為及功能，可用來設計高互動的網站。另外，Flash 有優異的多媒體處理能力，能運 作於大部分的瀏覽器，並提供程式及介面設計大量的彈性，可減少我們開發線上影像編輯器 時的困難和時間。基於以上原因，所以我們挑選 Flash 實作影像編輯器的功能。
在資料庫系統方面，我們使用 MySQL 資料庫系統。因為 MySQL 為免費的開放式原始碼 軟體，它可與 PHP 連結開發網路應用程式。因此，我們使用 MySQL 資料庫來存取資料。
OPEN 平台包含瀏覽器、OPEN 網站伺服器、資料庫系統三部分，架構如圖 3 所示，功 能說明如下：
瀏覽器：使用者透過瀏覽器操作OPEN網站提供的功能，包括blog、相簿、OPEN編輯器。
網站伺服器：網站伺服器負責接收瀏覽器提出的請求，並執行對應的功能程式，或是存 取資料庫中的資料，然後將結果回傳給瀏覽器。我們將相簿及影像編輯器的功能整合。
相簿中的影像可使用影像編輯器的工具來編輯，使用者可將編輯後的影像置於相簿分 享，或是下載到個人電腦儲存。影像編輯器的功能有檔案管理、編輯工具、特效三類功 能。
資料庫：資料庫負責儲存、查詢、管理資料。
MySQL 資料庫系統 瀏覽器
OPEN網站伺服器
OPEN編輯器 檔案管理
編輯工具
濾鏡特效 相簿
blog
圖 3 OPEN 平台的架構
4.2 OPEN編輯器編輯器編輯器編輯器的的的的功能功能功能功能
使用者在 OPEN 網站的相簿中，選取好想要編輯的影像後，相簿畫面如圖 4 所示，其左 下方有 Edit 連結，可以連到 OPEN 編輯器。OPEN 編輯器的介面如圖 5 所示，左方為編輯工 具列、中間為影像編輯區、右方為影像資訊區、上方為功能選單。影像編輯區會呈現欲編輯 的影像，影像資訊區會顯示欲編輯影像的大小資訊，也就是影像長、寬有多少個像素，以及 目前滑鼠的座標位置。
圖 4 OPEN 網站的相簿介面
圖 5 OPEN 編輯器的介面
4.2.1 OPEN編輯器的工具列功能編輯器的工具列功能編輯器的工具列功能 編輯器的工具列功能
OPEN編輯器的工具列提供十種工具，說明如下：
直線工具：讓使用者在影像上，可畫出任意長度、顏色、粗細的直線。點選直線工具按 鈕後，可在工具列下方調整直線的粗細及顏色區調整顏色。完成設定後，在影像上以滑 鼠拖曳線條，即可繪製一條直線。
畫筆工具：讓使用者在影像上，可隨意的描繪。點選畫筆工具按鈕後，選擇好畫筆顏色 及筆刷粗細，在影像上以滑鼠拖曳畫筆，即可開始描繪。
矩形裁剪工具：讓使用者裁剪出影像中被矩形邊框圍住的部份。點選矩形裁剪工具按鈕 後，可選擇欲裁剪的矩形範圍，然後在功能選單的Edit功能，選擇Copy可將影像複製出，
選擇Paste可將複製出的影像貼在欲編輯的影像上。
套索工具：讓使用者可裁剪出任意範圍、任意形狀的影像。點選套索工具按鈕後，使用 者沿著想要裁剪的前景邊緣勾勒出輪廓，之後可將影像複製出。複製跟貼上的操作方法 跟矩形裁剪工具相同。
矩形工具：幫助使用者在欲編輯的影像上，畫出矩形的物件。點選矩形工具按鈕後，選 擇好矩形填滿的顏色、邊框顏色、邊框線段的粗細，之後在欲編輯的影像上，以滑鼠拖 曳矩形的大小即可。
圓形工具：幫助使用者在欲編輯的影像上，畫出圓形的物件。圓形工具的操作方法以矩 形工具的操作方法類推。
局部特效畫筆工具：讓影像中被局部特效畫筆畫過的部份有特效效果。點選局部特效畫 筆按鈕後，會出現調整畫筆大小及特效的視窗。使用者可拖曳調整軸來設定筆刷大小，
再選擇特效效果來編輯。此工具提供模糊(blur)、灰階(gray)、亮度(brightness)等10種特效 供使用者選擇。
拖曳工具：複製出的影像，貼上的位置預設在背景的左上角，因此，拖曳工具可將貼上 的影像拖曳到適當的位置。
NIM工具：讓使用者不需仔細的描繪前景邊緣，就能分辨出前景的細長部分。點選NIM 工具按鈕後，在工具列下方會出現輔助工具，分別為前景填滿工具、細部修正工具、執 行工具、調整筆刷大小工具。NIM有兩種處理模式：即時跟非即時處理。若是選擇即時
處理，使用者在描邊時，NIM就會分析出前景邊界；若是選擇非即時處理，使用者就須 把前景邊緣都描繪好再按執行工具處理。當前景邊緣都處理完成後，點選前景填滿工具，
將剩餘的前景都以白色填滿，表示被選取到的前景範圍。若是有細部不滿意的地方，可 用細部修正工具手動修正。若是已滿意處理的結果，就可選擇複製按鈕，將前景複製出。
油漆桶工具：讓使用者在欲編輯的影像中，在相同顏色區塊內，可填入不同的顏色。
4.2.2 OPEN編輯器的編輯器的編輯器的功能選單功能編輯器的功能選單功能功能選單功能 功能選單功能
OPEN編輯器的功能選單提供使用者檔案管理、檔案編輯、調整影像大小、圖層效果、濾 鏡特效等五類功能，說明如下：
檔案管理：包括開啟舊檔、開新檔案、儲存檔案等功能。開啟舊檔功能讓使用者可從本 機電腦端或是OPEN網站的相簿中，開啟想要編輯的影像編輯。開新檔案功能讓使用者可 開啟新的空白的影像編輯，使用者可設定檔名及新檔案的長、寬的像素。儲存檔案功能 讓使用者可將已編輯好的影像，直接上傳到相簿分享，或是下載到本機電腦儲存。
檔案編輯：包括複製，貼上、回復等功能。複製功能可複製出使用者用矩形裁剪工具、
套索工具、NIM工具所裁出的影像，當做編輯素材。貼上功能可將複製的影像素材，貼 到欲編輯的影像中。回復功能可讓影像回復到上一個編輯步驟。
調整影像大小：讓使用者可對整個影像大小進行縮放。
圖層效果：讓使用者可針對貼上的影像，對它做旋轉、調整大小、調整顏色的功能。
濾鏡特效：濾鏡特效是針對整個影像來產生特效，OPEN編輯器有提供模糊、邊緣、負片、
銳化、浮雕、布紋、擴散、水彩、水波、颶風、顏色通道等11種特效。
5. OPEN編輯器與其它線上影像編輯器功能的比較編輯器與其它線上影像編輯器功能的比較編輯器與其它線上影像編輯器功能的比較編輯器與其它線上影像編輯器功能的比較
我們針對幾個功能較完整的線上影像編輯器和 OPEN 編輯器比較，結果如表 1 所示，說 明如下。Splashup [12]的介面和專業的影像編輯軟體 Photoshop 相似，提供 15 種特效讓使用 者選擇，它可編輯多張影像，有圖層的編輯技術。影像裁剪工具提供矩形裁剪及套索工具，
此兩種工具皆無法擷取出有細長形狀的前景。Picnik [9]強調影像編輯的趣味，提供 33 種的特 效及許多趣味圖示、邊框讓使用者選擇。這些效果都只需 one click 的操作，讓使用者容易編 輯，但只能針對一張影像編輯。影像裁剪工具只提供矩形裁剪工具，無法擷取出有細長形狀 的前景。Aviary [3]功能較完整，適合給想編輯出較專業影像的人使用，它提供 13 種特效，
可編輯多張影像，有圖層編輯技術。影像裁剪工具提供矩形裁剪及套索工具，無法擷取出有 細長形狀的前景。Photoshop Express [1]為 Photoshop 的線上版，它不像單機版的版本專業，
只有基本的編輯功能。Photoshop Express 提供 6 種特效，只能針對一張影像編輯，影像裁剪 工具只提供矩形裁剪工具，無法擷取出有細長形狀的前景。FotoFlexer [5]為目前功能完整，
且有較進階的影像處理編輯技術的線上影像編輯器。它提供 23 種特效，可編輯多張影像，有 圖層編輯技術，影像裁剪工具提供矩形裁剪工具和 Smart Cutout 工具，Smart Cutout 是目前線 上版的影像編輯器中，唯一有影像處理技術分析出前景的工具。我們開發的 OPEN 編輯器提 供 13 種特效，並可讓使用者編輯多張影像，影像裁剪工具提供矩形裁剪、套索工具、NIM 工 具，NIM 工具可擷取出前景的細長形狀。
我們用圖 6 [4]的影像來做實驗，比較 Smart Cutout 和 NIM 工具的效果。圖 7(a)為使用 Smart Cutout 工具所擷取出的影像，可看出在前景、背景顏色相近時時，處理效果不好，擷取出的 影像有許多雜訊。NIM 工具的效果如圖 7(b)所示，在前景邊緣的雜訊明顯較少。由此可見，
NIM 工具在影像擷取方面，優於其它現有的線上影像編輯器。
表 1 線上影像編輯器的功能比較 功能
網站 特效 編輯多張
影像 矩形裁剪 套索 擷取有細長形狀的前景
Splashup 15 種 可 有 有 不可
Picnik 33 種 不可 有 無 不可
Aviary 13 種 可 有 有 不可
Photoshop Express 6 種 不可 有 無 不可
FotoFlexer 23 種 可 有 無 前景、背景顏色相近時，效果不夠好
OPEN 13 種 可 有 有 前景、背景顏色相近時，效果較好
圖 6 老人的影像
(a) (b)
圖 7 (a)Smart Cutout 工具截取出的影像；(b)OPEN 擷取出的影像
6. 結論結論結論 結論
本論文介紹互動式線上影像擷取技術 NIM。它改良 Poisson matting 演算法在前景、背景 取樣的方法，可在描邊的過程中，開始處理畫筆涵蓋到的部份，快速得到處理的結果，並能 擷取出邊緣有細長形狀的前景。我們也已完成線上影像編輯器，NIM 為其中主要工具的技術，
此編輯器再與 blog 整合成一個分享的網站，讓編輯後的影像分享更為便利。
致謝 致謝 致謝 致謝
本研究接受國科會編號 NSC 96-2221-E-011-161 及 NSC 97-2221-E-011-093 研究計畫補助部分經費。
參考文獻參考文獻 參考文獻參考文獻
[1] Adobe, Photoshop express, https://www.photoshop.com/express/landing.html/.
[2] alexrabe, Learning by doing, http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.
[3] Aviary, http://a.viary.com/home.
[4] Y.-Y. Chuang, B. Curless, D. H. Salesin, and R. Szeliski, A Bayesian Approach to Digital Matting, 2001, http://grail.cs.washington.edu/projects/digital-matting/image-matting/.
[5] FotoFlexer, The world's most advanced online photo editor, http://fotoflexer.com/.
[6] M. Gleicher, “Image snapping,” in Proceedings of the 22nd annual conference on Computer graphics and interactive techniques, pp. 183-190.
[7] Y. Li, J. Sun, C.-K. Tang, and H.-Y. Shum, “Lazy snapping,” ACM Transactions on Graphics, Vol. 23, No. 3, 2004, pp. 303-308.
[8] E. N. Mortensen and W. A. Barrett, “Intelligent scissors for image composition,” in Proceedings of the 22nd annual conference on Computer graphics and interactive techniques, 1995, pp. 191-198.
[9] Picnik, Photo editing made fun, http://www.picnik.com/.
[10] C. Rother, V. Kolmogorov, and A. Blake, “"GrabCut": interactive foreground extraction using iterated graph cuts,”
ACM Transactions on Graphics, Vol. 23, No. 3, 2004, pp. 309-314.
[11] A. R. Smith and J. F. Blinn, “Blue screen matting,” in Proceedings of the 23rd annual conference on Computer graphics and interactive techniques 1996, pp. 259-268.
[12] Splashup, Jump right in, http://www.splashup.com/.
[13] J. Sun, J. Jia, C.-K. Tang, and H.-Y. Shum, “Poisson matting,” ACM Transactions on Graphics, Vol. 23, No. 3, 2004, pp. 315-321.
[14] J. Sun, Y. Li, S. B. Kang, and H.-Y. Shum, “Flash matting,” ACM Transactions on Graphics, Vol. 25, No. 3, 2006, pp. 772-778.
[15] C. Wang, Q. Yang, M. Chen, X. Tang, and Z. Ye, “Progressive Cut,” in Proceedings of the 14th annual ACM international conference on Multimedia, 2006, pp. 251-260.
[16] J. Wang, M. Agrawala, and M. F. Cohen, “Soft scissors: an interactive tool for realtime high quality matting,” ACM Transactions on Graphics, Vol. 26, No. 3, 2007, pp. Article 9.
[17] J. Wang and M. F. Cohen, “Optimized Color Sampling for Robust Matting,” in IEEE Conference on Computer Vision and Pattern Recognition, 2007, pp. 1-8.
[18] WordPress, http://wordpress.org/.
