本發(fā)明涉及網(wǎng)絡數(shù)據(jù)通信
技術領域：
，更具體地說，涉及一種在PC端對網(wǎng)頁上的彩信進行編輯的方法和裝置。
背景技術：
：目前通過PC發(fā)送彩信的功能在企業(yè)營銷、信息發(fā)布等領域使用普遍，但大多數(shù)WEB系統(tǒng)提供的彩信編輯方式都參考手機上的處理方法，在一個界面編輯所有圖片、文字、聲音等素材，不能體現(xiàn)PCWEB界面大屏幕的優(yōu)勢，使用起來進常不方便?，F(xiàn)有網(wǎng)頁編輯彩信技術不便用戶操作，編輯一個彩信往往要花費大量時間，本發(fā)明在總結(jié)前人經(jīng)驗的基礎上，優(yōu)化了彩信編輯流程，方便了用戶操作。本發(fā)明實現(xiàn)的彩信編輯方法體現(xiàn)了PC端屏幕大的優(yōu)勢，彩信內(nèi)容編輯清晰，鼠標操作要方便，且增加了圖片編輯，包括放大縮小裁剪旋轉(zhuǎn)，聲音選擇，文字編輯以及在線預覽等功能。技術實現(xiàn)要素：本發(fā)明旨在克服現(xiàn)有技術網(wǎng)頁編輯彩信技術的不足，提供一種基于網(wǎng)頁的彩信編輯方法和裝置，提供了分開編輯，集中預覽的彩信編輯方式，支持在線圖裁剪，即時預覽效果，支持文字編排方式自定義，解決了傳統(tǒng)系統(tǒng)在網(wǎng)頁上發(fā)送彩信時，圖片、聲音、文字編輯困難的問題且不能體現(xiàn)PCWEB界面大屏幕優(yōu)勢的問題。本發(fā)明上述技術問題這樣解決，構(gòu)造一種基于網(wǎng)頁的彩信編輯方法，使用彩信編輯器和彩信前臺編輯裝置對網(wǎng)頁彩信進行編輯，所述彩信編輯器用于創(chuàng)建彩信對象信息、創(chuàng)建用來存放幀對象的集合對象、存儲幀對象、獲取幀內(nèi)容、圖片上傳處理以及素材上傳方法調(diào)用處理，所述基于網(wǎng)頁的彩信編輯方法包括以下步驟：S1)、利用彩信編輯器，創(chuàng)建彩信編輯環(huán)境；S2)、利用彩信前臺編輯裝置，設置彩信默認屬性；S3)、利用圖片上傳裝置選擇圖片，調(diào)用圖片上傳方法，對圖片的大小、格式進行校驗，在上傳不成功時提示不通過的原因；S4)、根據(jù)縮放規(guī)則，利用圖片縮放裝置對圖片的尺寸進行調(diào)整，縮放后的寬度在55-1024，縮放后的高度在34-768，將縮放后的值賦給原圖；S5)、利用圖片裁剪裝置，按照三種常見尺寸對彩信圖片進行裁剪；S6)、利用圖片裁剪切換裝置定義原圖與新建圖片對象不同的長寬屬性，通過屬性變換實現(xiàn)動態(tài)截圖效果；S7)、利用圖片還原裝置獲取圖片對象信息，重新刷新幀對象列表和右側(cè)編輯區(qū)域，將初始上傳的文件重新加載到對應的區(qū)域，使圖片還原；S8)、利用文字處理裝置處理彩信文字，選擇文字選項卡，在文本區(qū)域編輯文字后，通過勾選文字在前選項框來指定文字在彩信內(nèi)容中展示的區(qū)域，獲取文字位置選項框的選中屬性，保存勾選狀態(tài)到彩信對象信息中；S9)、利用聲音處理裝置選擇聲音選項卡，在聲音編輯區(qū)域，點擊上傳特定格式的音頻文件，對彩信聲音進行處理，聲音調(diào)用系統(tǒng)標簽，可自動播放；S10)、利用彩信預覽裝置調(diào)用彩信展示方法，展示彩信內(nèi)容，且自動播放，預覽彩信。在本發(fā)明上述基于網(wǎng)頁的彩信編輯方法中，步驟S1編輯彩信編輯環(huán)境還包括以下子步驟：S11)、初始化：進入編輯頁面，默認加載左邊幀列表和右邊對應的當前幀信息內(nèi)容，并且在內(nèi)存中創(chuàng)建彩信對象信息；S12)、創(chuàng)建幀列表集合對象，所述幀列表集合對象是用來存放彩信內(nèi)容中幀對象的列表；S13)、存儲幀文本、圖片以及聲音，構(gòu)造彩信對象編輯方法；S14)、構(gòu)造獲取彩信幀內(nèi)容方法；S15)、添加幀對象處理圖片，用一個上傳文件來填充圖片材質(zhì)，復制文件至指定目錄，以同樣的方法來處理彩信的聲音、文字；S16)、通過調(diào)用素材上傳方法獲取系統(tǒng)內(nèi)存中的彩信編輯對象信息，調(diào)用素材上傳方法，如圖片上傳方法，添加當前幀對象信息，且更新到彩信編輯對象中，重新返回到前臺頁面，進行展示。在本發(fā)明上述基于網(wǎng)頁的彩信編輯方法中，步驟S3上傳圖片還包括以下步驟：S31)、首先校驗圖片格式，校驗通過，異步提交到后臺，后臺校驗文件大小，不通過則調(diào)用回調(diào)函數(shù)，提示不通過原因；S32)、彩信圖片提交通過后，即圖片上傳成功后，調(diào)用回調(diào)函數(shù)，刷新右側(cè)彩信編輯區(qū)域，將圖片寫到彩信編輯區(qū)域；S33)、通知調(diào)用幀列表方法，加載最新的幀對象信息；S34)、定義當前操作對象屬性，并使裁剪屬性可用。在本發(fā)明上述基于網(wǎng)頁的彩信編輯方法中，步驟S4中，圖片縮放裝置處理圖片放大和縮小，還包括以下步驟：S41)、獲取圖片對象，新建圖片對象，將獲取的圖片對象屬性賦給新建的圖片對象，定義獲取圖片對象長寬屬性為(第一長度，第一寬度)，定義新建圖片對象屬性為(第二長度，第二寬度)，定義原圖屬性為(第三長度，第三寬度)；如果獲取圖片對象的長寬如果小于特定最小圖片參數(shù)值，同時特定最小圖片參數(shù)值也是每次縮放大小，則不允許縮??；S42)、按照縮放規(guī)則計算，如果第一長度值>第一寬度值，參數(shù)為縮小，則第二長度值＝第一長度值-特定最小圖片參數(shù)值，參數(shù)為放大則第二長度值＝第一長度值+特定最小圖片參數(shù)值，而第二寬度值＝(第二長度值*第一寬度值)/第一長度值；S43)、如果如果第一長度值<第一寬度值參數(shù)為縮小時，則第二寬度值＝第一寬度值-特定最小圖片參數(shù)值，參數(shù)為放大時，則第二寬度值＝第一寬度值+特定最小圖片參數(shù)值；而第二長度值＝(第二寬度值*第一長度值)/第一寬度值；其中縮放后圖片的寬度必須在55～1024之間，縮放后圖片的高度必須在34～768之間；S44)、縮放處理，將縮放后的值第二長度值，第二寬度值分別賦給原圖屬性第三長度，第三寬度；在本發(fā)明上述基于網(wǎng)頁的彩信編輯方法中，步驟S5中圖片裁剪裝置對彩信圖片的裁剪功能設置，還包括以下步驟：S51)、初始化裁剪方法；S52)、調(diào)用JAVA中的插件功能，鼠標選擇截圖范圍，鼠標變更事件，調(diào)用自定義函數(shù)給截取后的圖片賦值，設置位置屬性和圖片大小屬性；S53)、執(zhí)行裁剪方法，重新刷新左側(cè)幀列表和右側(cè)編輯區(qū)域，將新的圖片文件刷新到編輯區(qū)域。在本發(fā)明上述基于網(wǎng)頁的彩信編輯方法中，步驟S6中裁剪彩信圖片尺寸切換功能設置，還包括以下步驟：S61)、在圖片上定位，且獲取圖片對象A，新建一個圖片對象B，將A對象屬性賦給B，定義原圖片長寬屬性第三切換長度，第三切換寬度；S62)、獲取切換的當前尺寸，如裁剪切換長度x裁剪切換寬度，定義新長寬屬性第一切換長度，第一切換寬度；如果第三切換長度值>裁剪切換長度值，第一切換長度值＝(第三切換長度值-裁剪切換長度值)/2；第三切換寬度值>裁剪切換寬度值，第一切換寬度值＝(第三切換寬度值-裁剪切換寬度值)/2；S63)、定義新的長寬屬性第四切換長度，第四切換寬度；第四切換長度值＝第一切換長度值+裁剪切換長度值；第四切換寬度值＝第一切換寬度值+裁剪切換寬度值二S64)、遞歸調(diào)用裁剪插件，調(diào)用動畫效果切換([第一切換長度，第一切換寬度，第四切換長度，第四切換寬度])方法，其中[第一切換長度，第一切換寬度，第四切換長度，第四切換寬度]屬性均為復合屬性，通過屬性變化，實現(xiàn)動態(tài)截圖效果，雙擊即可保存當前裁剪尺寸，并重新刷新幀對象類表和右側(cè)編輯區(qū)域。按照本發(fā)明另一方面提供的一種基于網(wǎng)頁的彩信編輯裝置，包括彩信編輯器以及彩信前臺編輯裝置，所述彩信編輯器用來在內(nèi)存中創(chuàng)建彩信對象信息和彩信內(nèi)容的幀對象列表，將彩信的圖片、文本以及聲音幀內(nèi)容存儲在內(nèi)存空間中，構(gòu)建彩信編輯對象方法，構(gòu)造彩信幀內(nèi)容獲取方法，添加幀對象處理方法以及調(diào)用素材上傳方法。在本發(fā)明上述基于網(wǎng)頁的彩信編輯裝置中，所述彩信內(nèi)容的幀對象列表包括彩信本體結(jié)構(gòu)體、彩信聲音播放結(jié)構(gòu)體、彩信內(nèi)容結(jié)構(gòu)體以及彩信內(nèi)容類型結(jié)構(gòu)體，它們用來存放彩信內(nèi)容中的幀對象列表，所述彩信本體結(jié)構(gòu)體用來存放彩信標題、請求ID以及幀內(nèi)容體等對象列表，所述彩信聲音播放結(jié)構(gòu)體用來存放播放時長、內(nèi)容單元數(shù)以及內(nèi)容單元體等對象列表，所述彩信內(nèi)容結(jié)構(gòu)體用來存放內(nèi)容體類型、文件名、內(nèi)容體的實際字節(jié)數(shù)以及內(nèi)容體的內(nèi)容等對象列表，所述彩信圖片類型結(jié)構(gòu)體用來存放各種圖片類型對象列表。在本發(fā)明上述基于網(wǎng)頁的彩信編輯裝置中，所述彩信前臺編輯裝置包括圖片上傳裝置、圖片縮放裝置、圖片裁剪裝置、圖片尺寸切換裝置、圖片還原裝置、文字處理裝置、聲音處理裝置以及彩信預覽裝置。在本發(fā)明上述基于網(wǎng)頁的彩信編輯裝置中，所述圖片上傳裝置用以對圖片的大小、格式進行校驗，在上傳不成功時提示不通過的原因；所述圖片縮放裝置根據(jù)縮放規(guī)則對圖片的尺寸進行調(diào)整，縮放后的寬度在55-1024，縮放后的高度在34-768，將縮放后的值賦給原圖；所述圖片裁剪裝置包括自定義裁剪裝置和自選尺寸裁剪裝置，按照三種常見尺寸對圖片進行裁剪；所述裁剪尺寸切換裝置用以通過屬性變換，實現(xiàn)動態(tài)截圖效果；所述圖片還原裝置用以獲取圖片對象信息，重新刷新幀對象列表，將初始上傳的文件重新加載到對應的區(qū)域；所述文字處理裝置用以編輯文字并指定文字顯示區(qū)域，所述聲音處理裝置用以上傳音頻文件并實現(xiàn)其播放功能，所述彩信預覽裝置用來展示編輯好的彩信內(nèi)容，并自動播放彩信音頻，以查看是否達到編輯彩信的效果。本發(fā)明針對現(xiàn)有網(wǎng)頁編輯彩信技術用戶操作不便，編輯一個彩信往往要花費大量時間，本發(fā)明在研究和總結(jié)現(xiàn)有技術基礎上，提出了一種基于網(wǎng)頁的彩信編輯方法和裝置，提供了分開編輯，集中預覽的彩信編輯方式，支持在線圖裁剪，即時預覽效果，支持文字編排方式自定義，解決了傳統(tǒng)系統(tǒng)在網(wǎng)頁上發(fā)送彩信時，圖片、聲音、文字編輯困難的問題，優(yōu)化了彩信編輯流程，方便了用戶操作。附圖說明下面將結(jié)合附圖及實施例，對本發(fā)明方法和裝置的特點作進一步說明，附圖中：圖1是本發(fā)明實施例的彩信編輯裝置組成邏輯示意圖圖2是本發(fā)明實施例中的幀對象列表組成邏輯示意圖圖3是本發(fā)明實施例中的彩信前臺編輯裝置組成邏輯示意圖圖4是本發(fā)明實施例中的彩信前臺編輯裝置頁面部分組成示意圖圖5是本發(fā)明實施例中的彩信前臺編輯裝置的文字處理裝置頁面示意圖圖6是本發(fā)明實施例中的彩信前臺編輯裝置的文字處理裝置頁面測試示意圖圖7是本發(fā)明實施例中的彩信前臺編輯裝置的聲音處理裝置頁面示意圖圖8是本發(fā)明實施例中的彩信前臺編輯裝置的預覽裝置頁面示意圖圖9是本發(fā)明實施例中的彩信編輯方法流程圖圖10是本發(fā)明實施例中的彩信編輯彩信編輯環(huán)境設置方法流程圖圖11是本發(fā)明實施例中的彩信圖片縮放方法流程圖圖12是本發(fā)明實施例中的彩信圖片裁剪功能設置方法流程圖圖13是本發(fā)明實施例中的彩信圖片尺寸切換功能設置方法流程圖具體實施方式圖1是本發(fā)明實施例中的彩信編輯裝置100組成邏輯示意圖，圖2是本發(fā)明實施例中的幀對象列表200組成邏輯示意圖，圖3是本發(fā)明實施例中的彩信前臺編輯裝置102組成邏輯示意圖，請參考圖1-圖3，彩信編輯裝置100包括彩信編輯器101以及彩信前臺編輯裝置102。彩信編輯器101用來在內(nèi)存中創(chuàng)建彩信對象信息和彩信內(nèi)容的幀對象列表，將彩信的圖片、文本以及聲音幀內(nèi)容存儲在內(nèi)存空間中，構(gòu)建彩信編輯對象方法，構(gòu)造彩信幀內(nèi)容獲取方法，添加幀對象處理方法以及調(diào)用素材上傳方法，彩信編輯器101主要用來創(chuàng)建彩信編輯環(huán)境，并對彩信前臺編輯裝置102的參數(shù)進行初始化，為進一步設置、編輯彩信做準備，例如創(chuàng)建彩信對象信息，request.getSession().setAttribute(″mmsEditer"，mmsEditer)，mmsEditer對象包含有彩信相關信息，如文件臨時目錄，文件名，彩信文字信息，聲音臨時目錄等基礎數(shù)據(jù)存放的相關信息，為一幀圖片信息內(nèi)容；創(chuàng)建LinkedListframeList＝newLinkedList()；在mmsEditer中對frameList進行定義，frameList集合對象是用來存放彩信內(nèi)容中的幀對象列表。彩信內(nèi)容的幀對象列表200包括彩信本體結(jié)構(gòu)體201、彩信聲音播放結(jié)構(gòu)體202、彩信內(nèi)容結(jié)構(gòu)體203以及彩信內(nèi)容類型結(jié)構(gòu)體204，它們用來存放彩信內(nèi)容中的幀對象列表200。彩信本體結(jié)構(gòu)體201用來存放彩信標題、請求ID以及幀內(nèi)容體等對象列表：彩信聲音播放結(jié)構(gòu)體202用來存放播放時長、內(nèi)容單元數(shù)以及內(nèi)容單元體等對象列表：字段名類型描述nPlayTimeint播放時長秒nMMSUnitNumint內(nèi)容單元數(shù)MMSContent[0]內(nèi)容體彩信內(nèi)容結(jié)構(gòu)體203用來存放內(nèi)容體類型、文件名、內(nèi)容體的實際字節(jié)數(shù)以及內(nèi)容體的內(nèi)容等對象列表：字段名類型描述pucFileName[255]int內(nèi)容體類型pucFileNameChar文件名ulMMSContentSizeint內(nèi)容體的實際字節(jié)數(shù)，不包括頭的內(nèi)容pucMMSContent[1]Char內(nèi)容體內(nèi)容體內(nèi)容彩信圖片類型結(jié)構(gòu)體204用來存放各種圖片類型對象列表。彩信編輯器101還要定義幀對象Frameframe＝newFrame(this)，F(xiàn)rame內(nèi)容包括文本privateMaterialtextMat、圖片privateMaterialimageMat以及聲音privateMaterialsoundMat；構(gòu)造彩信編輯對象方法，publicFrame(MmsEditermmsEditer){this.mmsEditer＝mmsEditer；}。彩信編輯器101通過publicLinkedListgetAllMat()獲取幀內(nèi)容方法，添加幀對象處理(聲音、文字同理)，用一個上傳文件來填充圖片材質(zhì)，復制文件至指定目錄；調(diào)用素材上傳方法mmsEditer＝(MmsEditer)RequestUtil.getSessionObj(request，”mmsEditer")，獲取系統(tǒng)內(nèi)存中的彩信編輯對象信息，調(diào)用素材上傳方法，添加當前幀對象信息，且更新到mmsEditer彩信編輯對象中，通過HttpServletRequest方法(request.setAttribute(″mmsEditer"，mmsEditer)；)重新返回到前臺頁面，進行展示。圖4是本發(fā)明實施例中的彩信前臺編輯裝置102頁面部分組成示意圖，圖5是本發(fā)明實施例中的彩信前臺編輯裝置102的文字處理裝置306頁面示意圖，圖6是本發(fā)明實施例中的彩信前臺編輯裝置的文字處理裝置306頁面測試示意圖，圖7是本發(fā)明實施例中的彩信前臺編輯裝置的聲音處理裝置307頁面示意圖，圖8是本發(fā)明的彩信前臺編輯裝置的預覽裝置308頁面示意圖，請參考圖4-圖8，彩信前臺編輯裝置102包括圖片上傳裝置301、圖片縮放裝置302、圖片裁剪裝置303、圖片尺寸切換裝置304、圖片還原裝置305、文字處理裝置306、聲音處理裝置307以及彩信預覽裝置308。圖片上傳裝置301調(diào)用uploadimg(obj)方法，首先校驗圖片格式，如jpg、png、bmp、gif等，校驗通過，通過ajax的請求，post提交方式，異步提交到后臺，后臺校驗文件大小，不通過則調(diào)用回調(diào)函數(shù)，提示不通過原因；通過，即圖片上傳成功后，調(diào)用回調(diào)函數(shù)，刷新右側(cè)彩信編輯區(qū)域，將圖片寫到彩信編輯區(qū)域；通知調(diào)用幀列表方法，加載最新的幀對象信息；定義屬性varjcrop_api。即當前操作對象，并啟用裁剪屬性。圖片縮放裝置302調(diào)用resizeImage(flag)方法，參數(shù)＝false/true，首先定義獲取圖片對象長寬屬性為(第一長度width，第一寬度height)，定義新建圖片對象屬性為(第二長度w，第二寬度h)，定義原圖屬性為(第三長度A.width，第三寬度A.height)；如果獲取圖片對象的長寬如果小于特定最小圖片參數(shù)值，如果A的長寬如果小于最小圖片參數(shù)size＝80像素或者其它規(guī)定的像素數(shù)，同時size也是每次縮放大小，則不允許縮?。黄浯?，計算縮放規(guī)則計算，如果第一長度width>第一寬度height，參數(shù)為縮小，則第二長度w＝第一長度width-size；參數(shù)為放大第二長度w＝第一長度width+size；而第二寬度h＝(第二長度w*第一寬度height)/第一長度width；如果第一長度width<第一寬度height，參數(shù)為縮小時，則第二寬度h＝第一寬度height-size，參數(shù)為放大時，第二寬度h＝第一寬度height+size；而第二長度w＝(第二寬度h*第一長度width)/第一寬度height；其中縮放后圖片的寬度必須在55～1024之間，縮放后圖片的高度必須在34～768之間，經(jīng)過縮放處理后，第二長度w＝Math.round第二長度(w)；第二寬度h＝Math.round(第二寬度h)，將縮放后的值，賦給原圖屬性，第三長度A.width＝第二長度w；第三寬度A.height＝第二寬度h。圖片裁剪裝置304包括自定義裁剪裝置和自選尺寸裁剪裝置，功能提供三種常見尺寸裁剪功能；圖片上傳成功后，初始化裁剪方法initJcrop()，調(diào)用jquery中的Jcrop插件功能，鼠標選擇截圖范圍，鼠標變更事件，調(diào)用自定義函數(shù)showPreview()，給截取后的圖片賦值，位置屬性和圖片大小屬性；最后執(zhí)行裁剪方法，sureCrop()；重新刷新左側(cè)幀列表和右側(cè)編輯區(qū)域，將新的圖片文件刷新到編輯區(qū)域。裁剪尺寸切換裝置303調(diào)用animateTo()方法，在圖片上定位，且獲取圖片對象A，新建一個圖片對象B，將A對象屬性賦給B，定義原圖片長寬屬性為(第一切換長度A.width，第一切換寬度A.height)；獲取切換的當前尺寸，如裁剪切換長度cjwidthx裁剪切換寬度cjheight，定義新長寬屬性(第二切換長度w、第二切換寬度h)，如果第一切換長度值width>裁剪切換長度值parseInt(cjwidth)，第二切換長度值w＝(第一切換長度值width-裁剪切換長度值parseInt(cjwidth))/2；如果第一切換寬度值height>裁剪切換寬度值parseInt(cjheight)，第二切換寬度值h＝(第一切換寬度值height-裁剪切換寬度值parseInt(cjheight))/2。定義新的長寬屬性為(第三切換長度ww，第三切換寬度hh)，第三切換長度值ww＝第二切換長度值w+裁剪切換長度值parseInt(cjwidth)；第三切換寬度值hh＝第二切換寬度值h+裁剪切換寬度值parseInt(cjheight)。jcrop_api上遞歸調(diào)用jcrop_api，animateTo([第二切換長度w，第二切換寬度h，第三切換長度ww，第三切換寬度hh])方法，其中[第二切換長度w，第二切換寬度h，第三切換長度ww，第三切換寬度hh]屬性均為css屬性，通過屬性變化，實現(xiàn)動態(tài)截圖效果。雙擊即可保存當前裁剪尺寸，并重新刷新幀對象類表和右側(cè)編輯區(qū)域。圖片還原裝置305調(diào)用cancelCrop()方法，獲取圖片對象信息，重新刷新幀對象列表和右側(cè)編輯區(qū)域，將初始上傳的文件重新加載到對應的區(qū)域。文字處理裝置306選擇文字選項卡，在文本區(qū)域編輯文字后，通過勾選文字在前選項框來指定文字在彩信內(nèi)容中展示的區(qū)域，調(diào)用setTextBefore()方法，獲取文字位置選項框的選中屬性，保存勾選狀態(tài)到彩信對象信息中。聲音處理裝置307選擇聲音選項卡，在聲音編輯區(qū)域，點擊上傳音頻文件。彩信預覽裝置308調(diào)用Pop(′showMmsPreviewer.ipi?timestamp＝′+(newDate()).valueOf()，′pop_mms′)方法，彈出層，展示彩信內(nèi)容，且自動播放。彩信編輯過程中，所有彩信內(nèi)容已被保存在系統(tǒng)緩存中，預覽時需要獲取緩存信息。獲取session中的MmsEditer對象信息，其中包含彩信所有內(nèi)容，并通過request.setAttribute(”mmsEditer"，mmsEditer)方式返回到頁面上，前臺解析過程，在mmsEditer對象中獲取frameList列表，即當前彩信幀列表信息，解析frameList列表，遍歷幀對象展示，其中，在同一幀內(nèi)，需要注意文字位置標識，如果文字在前，展示順序為文字圖片聲音，反之圖片文字聲音圖9是本發(fā)明的彩信編輯方法流程圖，圖10是本發(fā)明的彩信編輯彩信編輯環(huán)境設置方法流程圖，圖11是本發(fā)明的彩信圖片縮放方法流程圖，圖12是本發(fā)明的彩信圖片裁剪功能設置方法流程圖，圖13是本發(fā)明的彩信圖片尺寸切換功能設置方法流程圖，請參考圖9-圖13，一種基于網(wǎng)頁的彩信編輯方法，使用彩信編輯器101和彩信前臺編輯裝置102對網(wǎng)頁彩信進行編輯，彩信編輯器101用于創(chuàng)建彩信對象信息、創(chuàng)建用來存放幀對象的集合對象、存儲幀對象、獲取幀內(nèi)容、圖片上傳處理以及素材上傳方法調(diào)用處理，彩信編輯方法包括以下步驟：S1)、利用彩信編輯器101，創(chuàng)建彩信編輯環(huán)境；S2)、利用彩信前臺編輯裝置102，設置彩信默認屬性；S3)、利用圖片上傳裝置301選擇圖片，調(diào)用圖片上傳方法，對圖片的大小、格式進行校驗，在上傳不成功時提示不通過的原因；S4)、根據(jù)縮放規(guī)則，利用圖片縮放裝置302對圖片的尺寸進行調(diào)整，縮放后的寬度在55-1024，縮放后的高度在34-768，將縮放后的值賦給原圖；S5)、利用圖片裁剪裝置304，按照三種常見尺寸對彩信圖片進行裁剪；S6)、利用圖片裁剪切換裝置303定義原圖與新建圖片對象不同的長寬屬性，通過屬性變換實現(xiàn)動態(tài)截圖效果；S7)、利用圖片還原裝置305獲取圖片對象信息，重新刷新幀對象列表和右側(cè)編輯區(qū)域，將初始上傳的文件重新加載到對應的區(qū)域，使圖片還原；S8)、利用文字處理裝置306處理彩信文字，選擇文字選項卡，在文本區(qū)域編輯文字后，通過勾選文字在前選項框來指定文字在彩信內(nèi)容中展示的區(qū)域，獲取文字位置選項框的選中屬性，保存勾選狀態(tài)到彩信對象信息中；S9)、利用聲音處理裝置307選擇聲音選項卡，在聲音編輯區(qū)域，點擊上傳特定格式的音頻文件，對彩信聲音進行處理，聲音調(diào)用系統(tǒng)標簽，可自動播放；S10)、利用彩信預覽裝置308調(diào)用彩信展示方法，展示彩信內(nèi)容，且自動播放，預覽彩信。進一步地，步驟S1編輯彩信編輯環(huán)境還包括以下子步驟：S11)、初始化：進入編輯頁面，默認加載左邊幀列表和右邊對應的當前幀信息內(nèi)容，并且在內(nèi)存中創(chuàng)建彩信對象信息；S12)、創(chuàng)建幀列表集合對象，幀列表集合對象是用來存放彩信內(nèi)容中的幀對象列表200；S13)、存儲幀文本、圖片以及聲音，構(gòu)造彩信對象編輯方法；S14)、構(gòu)造獲取彩信幀內(nèi)容方法；S15)、添加幀對象處理圖片，用一個上傳文件來填充圖片材質(zhì)，復制文件至指定目錄，以同樣的方法來處理彩信的聲音、文字；S16)、通過調(diào)用素材上傳方法獲取系統(tǒng)內(nèi)存中的彩信編輯對象信息，調(diào)用素材上傳方法，如圖片上傳方法，添加當前幀對象信息，且更新到彩信編輯對象中，重新返回到前臺頁面，進行展示。進一步地，利用圖片上傳裝置301對圖片進行上傳的步驟S3還包括以下子步驟：S31)、首先校驗圖片格式，校驗通過，異步提交到后臺，后臺校驗文件大小，不通過則調(diào)用回調(diào)函數(shù)，提示不通過原因；S32)、彩信圖片提交通過后，即圖片上傳成功后，調(diào)用回調(diào)函數(shù)，刷新右側(cè)彩信編輯區(qū)域，將圖片寫到彩信編輯區(qū)域；S33)、通知調(diào)用幀列表方法，加載最新的幀對象信息；S34)、定義當前操作對象屬性，并使裁剪屬性可用。進一步地，利用圖片縮放裝置302處理圖片放大和縮小的步驟S4還包括以下子步驟：S41)、圖片縮放裝置302調(diào)用resizeImage(flag)方法，參數(shù)＝false/true，首先定義獲取圖片對象長寬屬性為(第一長度width，第一寬度height)，定義新建圖片對象屬性為(第二長度w，第二寬度h)，定義原圖屬性為(第三長度A.width，第三寬度A.height)；如果獲取圖片對象的長寬如果小于特定最小圖片參數(shù)值，如果A的長寬如果小于最小圖片參數(shù)size＝80像素或者其它規(guī)定的像素數(shù)，同時size也是每次縮放大小，則不允許縮小；S42)、計算縮放規(guī)則計算，如果第一長度width>第一寬度height，參數(shù)為縮小，則第二長度w＝第一長度width-size；參數(shù)為放大第二長度w＝第一長度width+size；而第二寬度h＝(第二長度w*第一寬度height)/第一長度width；S43)、如果第一長度width<第一寬度height，參數(shù)為縮小時，則第二寬度h＝第一寬度height-size，參數(shù)為放大時，第二寬度h＝第一寬度height+size；而第二長度w＝(第二寬度h*第一長度width)/第一寬度height；其中縮放后圖片的寬度必須在55～1024之間，縮放后圖片的高度必須在34～768之間，經(jīng)過縮放處理后，第二長度w＝Math.round第二長度(w)；第二寬度h＝Math.round(第二寬度h)；S44)、將縮放后的值，賦給原圖屬性，第三長度A.width＝第二長度w；第三寬度A.height＝第二寬度h根據(jù)本發(fā)明的彩信編輯方法，彩信圖片的裁剪功能設置步驟S5還包括以下步驟：S51)、初始化裁剪方法initJcrop()；S52)、調(diào)用jquery中的Jcrop插件功能，鼠標選擇截圖范圍，鼠標變更事件，調(diào)用自定義函數(shù)showPreview()，給截取后的圖片賦值，位置屬性和圖片大小屬性；S53)、執(zhí)行裁剪方法sureCrop()，重新刷新左側(cè)幀列表和右側(cè)編輯區(qū)域，將新的圖片文件刷新到編輯區(qū)域。根據(jù)本發(fā)明的彩信編輯方法，裁剪彩信圖片尺寸切換功能設置步驟S6還包括以下步驟：S61)、裁剪尺寸切換裝置303調(diào)用animateTo()方法，在圖片上定位，且獲取圖片對象A，新建一個圖片對象B，將A對象屬性賦給B，定義原圖片長寬屬性為(第一切換長度A.width，第一切換寬度A.height)；S62)、獲取切換的當前尺寸，如裁剪切換長度cjwidthx裁剪切換寬度cjheight，定義新長寬屬性(第二切換長度w、第二切換寬度h)，如果第一切換長度值width>裁剪切換長度值parseInt(cjwidth)，第二切換長度值w＝(第一切換長度值width-裁剪切換長度值parseInt(cjwidth))/2；如果第一切換寬度值height>裁剪切換寬度值parseInt(cjheight)，第二切換寬度值h＝(第一切換寬度值height-裁剪切換寬度值parseInt(cjheight))/2；S63)、定義新的長寬屬性為(第三切換長度ww，第三切換寬度hh)，第三切換長度值ww＝第二切換長度值w+裁剪切換長度值parseInt(cjwidth)；第三切換寬度值hh＝第二切換寬度值h+裁剪切換寬度值parseInt(cjheight)；S64)、jcrop_api上遞歸調(diào)用jcrop_api，animateTo([第二切換長度w，第二切換寬度h，第三切換長度ww，第三切換寬度hh])方法，其中[第二切換長度w，第二切換寬度h，第三切換長度ww，第三切換寬度hh]屬性均為css屬性，通過屬性變化，實現(xiàn)動態(tài)截圖效果。雙擊即可保存當前裁剪尺寸，并重新刷新幀對象類表和右側(cè)編輯區(qū)域。以上所述，僅為本發(fā)明較佳的具體實施方式，但本發(fā)明的保護范圍并不局限于此，任何屬性本
技術領域：
的技術人員在本發(fā)明揭露的技術范圍內(nèi)，可輕易想到的變化或替換，都應涵蓋在本發(fā)明的保護范圍之內(nèi)。因此，本發(fā)明的保護范圍應該以權(quán)利要求的保護范圍為準。當前第1頁1 2 3