文本等信息。該用戶為矩形框設(shè)置填充信息的操作的接口，可以支持用戶每完成一個矩形框繪制后及時操作，也可支持用戶將所有需要繪制的矩形框繪制完成之后，通過選中矩形框分別為各當(dāng)前選中的矩形框設(shè)置填充?目息。
[0073]本實(shí)施例通過步驟S230根據(jù)所述矩形區(qū)域的信息循環(huán)對所述背景圖片的區(qū)域進(jìn)行表格劃分，使得所述矩形區(qū)域分別位于一個獨(dú)立的單元格中。
[0074]本步驟的目的在于，所述背景圖片的區(qū)域進(jìn)行表格劃分之后，各矩形區(qū)域分別位于一個獨(dú)立的單元格中，即每一獨(dú)立單元格最多包含一個矩形區(qū)域，從而便于排版以及便于對各獨(dú)立表格元素進(jìn)行控制。
[0075]其具體方法可包括多種，例如，可通過如下步驟實(shí)現(xiàn):
[0076]步驟一、遍歷所有的矩形區(qū)域，根據(jù)所述所有的矩形區(qū)域的縱坐標(biāo)及高度將所述背景圖片的區(qū)域劃分為至少一個橫向表格，以使每一橫向表格包含最少數(shù)量的矩形區(qū)域。
[0077]例如，具體包括，將矩形區(qū)域Ri的縱坐標(biāo)Y到縱坐標(biāo)Y加上所述矩形區(qū)域Ri的高度之間在所述背景圖片上形成的橫向表格稱為Ci，若所述橫向表格Ci與其他矩形區(qū)域重疊，則對所述橫向表格Ci的寬度進(jìn)行延伸直到不與其他矩形區(qū)域重疊，再從所述背景圖片的區(qū)域劃出所述橫向表格Ci，遍歷完所有的矩形區(qū)域后，在所述背景圖片上形成橫向表格Cl-Cn。
[0078]步驟二、遍歷所有的橫向表格，根據(jù)所述所有的矩形區(qū)域的橫坐標(biāo)及寬度將所述背景圖片的區(qū)域劃分為至少一個縱向表格，以使每一縱向表格包含最少數(shù)量的矩形區(qū)域。
[0079]例如，遍歷所有的橫向表格Cl-Cn，若其中存在橫向表格包含至少兩個矩形區(qū)域，則根據(jù)所包含的至少兩個矩形區(qū)域的橫坐標(biāo)及寬度將所述橫向表格Ci進(jìn)一步劃分為多個列向表格，將矩形區(qū)域Ri的縱坐標(biāo)Y到縱坐標(biāo)Y加上所述矩形區(qū)域Ri的高度之間在所述背景圖片上形成的橫向表格稱為Ci，若所述橫向表格Ci與其他矩形區(qū)域重疊，則對所述橫向表格Ci的寬度進(jìn)行延伸直到不與其他矩形區(qū)域重疊，再從所述背景圖片的區(qū)域劃出所述橫向表格Ci，遍歷完所有的矩形區(qū)域后，在所述背景圖片上形成橫向表格Cl-Cn。
[0080]步驟三、遍歷所有的縱向表格，若其中存在縱向表格包含至少兩個矩形區(qū)域，則根據(jù)所包含的矩形區(qū)域的縱坐標(biāo)及高度將所述縱向表格劃分為至少一個橫向表格，以使每一橫向表格包含最少數(shù)量的矩形區(qū)域。
[0081]步驟四、遍歷所有的橫向表格，若其中存在橫向表格包含至少兩個矩形區(qū)域，則根據(jù)所包含的矩形區(qū)域的橫坐標(biāo)及寬度將所述橫向表格劃分為至少一個縱向表格，以使每一縱向表格包含最少數(shù)量的矩形區(qū)域；
[0082]重復(fù)執(zhí)行步驟三至步驟四，直到每一矩形區(qū)域分別位于一個獨(dú)立的單元格為止。
[0083]本實(shí)施例通過步驟S240對所述矩形區(qū)域設(shè)置對應(yīng)的填充信息后生成表格代碼發(fā)送到直郵目標(biāo)客戶的郵箱地址，并根據(jù)所述矩形區(qū)域的信息以及所述填充信息生成直郵對應(yīng)的在線WEB頁面上傳到服務(wù)器。
[0084]本實(shí)施例通過在呈現(xiàn)背景圖片之后，根據(jù)在背景圖片上框選出的矩形區(qū)域的信息以及為所述矩形區(qū)域所設(shè)置的填充信息，對背景圖片的區(qū)域進(jìn)行表格劃分，使得所述矩形區(qū)域分別位于一個獨(dú)立的單元格中。能夠使表格中所包含的各個目標(biāo)區(qū)域均單獨(dú)位于一個獨(dú)立的單元格中，從而便于排版以及便于對各獨(dú)立表格元素進(jìn)行控制。
[0085]實(shí)施例二
[0086]圖3是本實(shí)施例所述的直郵制作方法流程圖，本實(shí)施例在實(shí)施例一的基礎(chǔ)之上，本實(shí)施例以制作人員通過電腦來制作直郵，其中通過鼠標(biāo)操作來對可視化界面進(jìn)行操作為例說明制作直郵的方法。如圖3所示，本實(shí)施例所述的直郵制作方法包括:
[0087]本實(shí)施例通過步驟S310實(shí)現(xiàn)可視化界面。
[0088]操作界面實(shí)現(xiàn)。界面采用網(wǎng)頁實(shí)現(xiàn)的方式，默認(rèn)情況下，界面中間顯示一個“ + ”號，實(shí)際上是一個透明度為零的input文件選擇按鈕，作用是點(diǎn)擊后可以讓用戶選擇一個文件，當(dāng)用戶點(diǎn)擊選擇一張圖片作為直郵背景圖，利用FileReader對象獲取用戶選擇的文件，判斷文件類型是否圖片，如果不是則提示用戶選擇錯誤；再利用readAsDataURL函數(shù)獲取圖片的Base64字符編碼，將此編碼設(shè)置在img標(biāo)簽的src屬性，則能顯示出用戶剛剛選擇的圖片。
[0089]監(jiān)聽用戶的鼠標(biāo)在背景圖的所有事件。當(dāng)鼠標(biāo)點(diǎn)擊在背景圖的任意地方時候，開啟勾選區(qū)域模式，當(dāng)鼠標(biāo)在圖片上移動的時候，展示出勾選的區(qū)域，例如，顯示為藍(lán)色以區(qū)別于背景圖，當(dāng)鼠標(biāo)點(diǎn)擊放開的時候，表示確定了框選出來的區(qū)域。
[0090]本實(shí)施例通過步驟S320監(jiān)聽用戶的鼠標(biāo)在背景圖片的操作事件。
[0091]鼠標(biāo)單擊藍(lán)色矩形區(qū)域，可以修改矩形區(qū)域的大小以及位置。如下圖4所示。鼠標(biāo)雙擊藍(lán)色區(qū)域，可以為選中區(qū)域填充內(nèi)容以及響應(yīng)事件，如圖5-6所示。
[0092]輸入需要的內(nèi)容后，能夠?qū)崟r看到效果，及時調(diào)整內(nèi)容。
[0093]本實(shí)施例通過步驟S330劃分表格，完成制作。
[0094]本步驟的算法實(shí)現(xiàn)包括:用戶操作界面中，采用的是絕對定位的方式來顯示，但最終保存為直郵時候并不能這么做，因?yàn)猷]件系統(tǒng)會把絕對定位信息給過濾掉，能兼容所有瀏覽器和郵件系統(tǒng)的，就只有table表格布局了。
[0095]操作界面中，會將用戶框選的所有內(nèi)容保存起來，其中包括矩形區(qū)域的X坐標(biāo)，y坐標(biāo)，寬度，高度，以及填充的內(nèi)容，以及會記錄直郵背景圖的大小，作為布局的邊界。
[0096]本步驟通過圖7示意性示出本步驟中直郵制作方法中劃分表格以及完成制作的流程圖，如圖7所示，本步驟具體包括如下子步驟:
[0097]本實(shí)施例通過步驟S710遍歷所有的矩形區(qū)域，對矩形區(qū)域按行進(jìn)行分組，遍歷完所有的區(qū)域，將區(qū)域都分好組，分出組Al-An。
[0098]遍歷所有的矩形區(qū)域，對矩形區(qū)域進(jìn)行分組，分組名設(shè)定為A，分組的依據(jù)是每個區(qū)域的1坐標(biāo)到1坐標(biāo)加上區(qū)域高度之間，在這個橫向的面積中(如圖8的分組A1)，不存在與其他區(qū)域重疊，則分為分組A1 ;如果存在(如圖8的分組A2)，則將面積往下拉伸，找到區(qū)域3的y坐標(biāo)加上高度，在這個橫向面積中，沒有與其他區(qū)域重疊的，這分為分組A2。
[0099]按照步驟一的方式，遍歷完所有的區(qū)域，將區(qū)域都分好組，分出組Al-An。
[0100]本實(shí)施例通過步驟S720遍歷分組Al-An，對每個分組的區(qū)域，再次按列進(jìn)行分組，劃分出更細(xì)的分組Al-n到An-η。
[0101]遍歷分組Al-An，對每個分組的區(qū)域，再次進(jìn)行分組，分組的依據(jù)是每個區(qū)域x坐標(biāo)到X坐標(biāo)加上寬度之間，在這個縱向的面積中(如圖9所示的分組Al-a)，如果不存在與其他的區(qū)域重疊的情況，那么分為分組Al-a ;如果存在(如圖9所示的分組A2_a)，這將縱向面積往右側(cè)拉伸，找到下一個區(qū)域5，判斷區(qū)域2的X坐標(biāo)到區(qū)域5的X坐標(biāo)加上寬度的面積中，是否存在其它其它疊加區(qū)域，不存在，則分為分組A2-a ;如果存在則繼續(xù)之前步驟。
[0102]按照步驟二的方式，遍歷完所有的步驟一分組，劃分出更細(xì)的分組Al-n到An-n出來。
[0103]本實(shí)施例通過步驟S730遍歷所有的分組An-n，判斷該分組中是否有且只有一個區(qū)域，如果是，跳過；如果不是，將該分組重復(fù)進(jìn)行步驟一與步驟二的操作，直到所有的區(qū)域都單獨(dú)劃分在一個分組中。
[0104]遍歷所有的分組An-n，判斷該分組中是否有且只有一個區(qū)域，如果是，跳過；如果不是，將該分組進(jìn)行步驟一與步驟二的操作，最多進(jìn)行三次重復(fù)分組，能將99%以上的情況把所有的區(qū)域都單獨(dú)劃分在一個分組中(如圖10)。
[0105]本實(shí)施例通過步驟S740根據(jù)分好的組劃分和合并表格出來。
[0106]根據(jù)步驟四分好的組，來劃分和合并table出來，根據(jù)圖10中橫寬的線，制作一個7行1列的表格A，每一行的的高度根據(jù)步驟一中的分組A的y坐標(biāo)與高度而定，從0開始，0到分組A1的的y坐標(biāo)為一個高度，分組A1的y坐標(biāo)到分組A1的y坐標(biāo)加上高度為第二個高度，如此類推出所有的高度；在表格A的第二行添加一個1行3列的表格A1，每一列的高寬根據(jù)步驟二中的分組An-n的X坐標(biāo)與