基于MUI的通用照片處理技術(shù)研究

曹萍萍　孫偉　雷暉　柯達(dá)權(quán)

摘要：針對(duì)移動(dòng)設(shè)備在處理拍照時(shí)需要為不同平臺(tái)開發(fā)不同APP的問題，提出一個(gè)基于MUI的通用解決方案，使用HTML5和JavaScript技術(shù)實(shí)現(xiàn)在移動(dòng)設(shè)備上拍照、裁剪和上傳，并記錄照片拍攝地的經(jīng)度和緯度。該方案較好地解決了“不同平臺(tái)程序不通用問題”，在實(shí)時(shí)性要求不高的情況下具有較好的應(yīng)用前景。

關(guān)鍵詞：拍照;裁剪;上傳

中圖分類號(hào)：TP3 ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）13-0232-02

隨著科學(xué)技術(shù)的發(fā)展，移動(dòng)設(shè)備已經(jīng)普及，移動(dòng)設(shè)備尤其是手機(jī)已經(jīng)成為人們拍照的常用設(shè)備，基于移動(dòng)設(shè)備而開發(fā)和一些管理系統(tǒng)也常常需要將照片上傳，并進(jìn)行后續(xù)地處理。但常見移動(dòng)設(shè)備往往為了照片效果，采用高分辨率、色彩方式進(jìn)行存儲(chǔ)，圖片常常達(dá)到幾M，有的甚至更大，這嚴(yán)重影響了上傳的速度，同時(shí)對(duì)于圖片管理系統(tǒng)往往需要對(duì)圖片分辨率進(jìn)行進(jìn)行壓縮，對(duì)尺寸進(jìn)行裁減，并只獲取圖片中關(guān)鍵的內(nèi)容，最后再上傳到指定服務(wù)器上，如何對(duì)處理照片，是許多管理系統(tǒng)經(jīng)常面臨的問題。

目前照片上傳一般是基于Android或iOS的技術(shù)，但因?yàn)椴煌脚_(tái)使用不同的技術(shù)，往往需要開發(fā)兩套APP，這就增加很大的開發(fā)成本。為更好的解決這個(gè)問題，基于HTML5和JavaScript技術(shù)的Web App技術(shù)可以較好的避免了開發(fā)兩套APP的情況，而MUI是基于HTML5和JavaScript的高性能前端框架，提供了非常最接近原生APP的體驗(yàn)。本文基于MUI框架，提出一套照片上傳方案，實(shí)現(xiàn)在手機(jī)上拍攝，并將照片進(jìn)行壓縮、裁剪和上傳，同時(shí)記錄相關(guān)的經(jīng)度和緯度。

1 相關(guān)技術(shù)介紹

1.1 MUI框架

MUI框架是由數(shù)字天堂（DCLOUD）公司推出的一套前端開發(fā)框架，該框架為開發(fā)者提供了大量的H5和js語(yǔ)言組成的組件，大大的方便了用戶開發(fā)Web端應(yīng)用、Web APP等應(yīng)用的開發(fā)效率，在性能上非常接近原生移動(dòng)端APP，用戶體驗(yàn)非常好，同時(shí)具有體積小、直接使用原生 JavaScript編寫，性能好等三個(gè)特點(diǎn)。結(jié)合DCLOUD公司旗下的另一款集成開發(fā)軟件HBuilder，可以方便地進(jìn)行Web APP的開發(fā)、設(shè)計(jì)和一鍵打包工作，并最終可以發(fā)布為Android版 和iOS版的APP。

1.2 HTML5 plus Runtime

HTML5 plus Runtime，簡(jiǎn)稱5+ Runtime或HTML 5 +，它是一個(gè)運(yùn)行于手機(jī)端的強(qiáng)化web引擎，既能支持標(biāo)準(zhǔn)HTML 5，還可以支持很多擴(kuò)展的JavaScript API接口，使得JavaScript 的能力得到了很好的提升，功能上接近原生APP。5+ Runtime被內(nèi)置于HBuilder集成開發(fā)環(huán)境，可以在真機(jī)運(yùn)行和打包時(shí)自動(dòng)掛載。它相對(duì)于早期的phonegap/Cordova方案和近年的react native方案，提供了更為豐富的JavaScript API，大大減少了用原生語(yǔ)言開發(fā)擴(kuò)展api的機(jī)會(huì)，大大提高了用戶開發(fā)效率。

1.3 copper.js插件

copper.js是一款使用簡(jiǎn)單的jQuery插件，它在圖片處理方面功能十分強(qiáng)大，在觸摸屏設(shè)備和PC上都支持HTML5的Canvas畫布功能，能夠?qū)崿F(xiàn)對(duì)所拍攝照片的放大、縮小、移動(dòng)、裁剪、旋轉(zhuǎn)等多種操作，在PC端還支持鼠標(biāo)滾輪的放大縮小操作，同時(shí)還可以自由設(shè)置裁剪區(qū)域形狀的縱橫比例，如1：1，4：3，16：9，也可以設(shè)置為自由比例，由用戶在裁剪時(shí)自由進(jìn)行拖拽，這非常方便用戶對(duì)照片內(nèi)容的選擇和操作。

2 方案設(shè)計(jì)

本文要實(shí)現(xiàn)的功能是通過手機(jī)拍照、裁剪和上傳照片，并記錄GPS坐標(biāo)，存儲(chǔ)到服務(wù)器的數(shù)據(jù)庫(kù)中，操作成功后返回移動(dòng)端一個(gè)成功的信息提示。基于MUI的照片拍攝和上傳功能的實(shí)現(xiàn)思路如圖1所示：

當(dāng)用戶使用手機(jī)等移動(dòng)設(shè)備要進(jìn)行拍照時(shí)，使用HTML5 plus Runtime來調(diào)用移動(dòng)設(shè)備中的攝像頭，也可以從現(xiàn)有相冊(cè)中選擇照片，使用圖片處理插件copper.js來實(shí)現(xiàn)圖片的放大、縮小以及裁剪處理，為了獲取拍照地點(diǎn)位置，需要通過申請(qǐng)百度的訪問應(yīng)用（AK），獲取百度定位的權(quán)限，并在拍照頁(yè)面通過HTML 5 plus Runtime獲取當(dāng)前位置的經(jīng)度和緯度，當(dāng)用戶拍照并裁剪照片后，將位置信息一起上傳到服務(wù)器中，并返回上傳成功的提示。

3 具體實(shí)現(xiàn)

3.1 拍照的實(shí)現(xiàn)

通過HTML5 plus Runtime調(diào)用移動(dòng)設(shè)備中的攝像頭，為方便操作，使用plus.camera.getCamera方法啟用后置攝像頭，并將拍攝到的照片以隨機(jī)數(shù)命名存放，然后調(diào)用copper.js設(shè)定照片顯示區(qū)域大小，并進(jìn)一步設(shè)置對(duì)該照片文件的放大縮小，最后通過移動(dòng)和調(diào)整裁剪框操作完成操作。

拍照操作的代碼：

var cmr = plus.camera.getCamera（2）;

cmr.captureImage（function（path） {

plus.io.resolveLocalFileSystemURL（path， function（entry） {var newPath = entry.toLocalURL（） + "？version=" + Math.random（）;

loadImage（newPath）;}）;}，

function（error） {mui.toast（error.message）;}， {filename： "_documents/"}

3.2 照片剪裁的實(shí)現(xiàn)

裁剪照片需要前期先配置copper.js，，以控制顯示區(qū)域的大小、圖像縮放和移動(dòng)、裁剪區(qū)域縮放和拖動(dòng)等各參數(shù)的配制，具體的代碼如下：

var dataURL = $（"#userImage_id"）.cropper（"getCroppedCanvas"，

{ width： 320，height： 400 ?}）;

var imgUrl = dataURL.toDataURL（"image/jpg"， 1）;

$（"#userImage_id"）.attr（"src" ， imgUrl）;

$（"#userImage_id"）.cropper（"replace"， imgUrl）;

$（"#userImage_id"）.cropper（"clear"）;

$（"#userImage_id"）.cropper（"disable"）;

window.imageDisable = true;

$（"button.toolbutton"）.prop（"enable"， true）;

uploadFile（imgUrl）;

}）;

initImageCropper（）;

}）;

3.3 拍照位置的實(shí)現(xiàn)

通過使用HTML5 plus Runtime來獲取當(dāng)前移動(dòng)設(shè)備中的攝像頭，并通過調(diào)用默認(rèn)位置，來實(shí)現(xiàn)采集當(dāng)前位置的經(jīng)緯度坐標(biāo)。

3.4 照片和位置數(shù)據(jù)上傳

為方便照片數(shù)據(jù)在網(wǎng)絡(luò)上的傳輸，在此將照片二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成Base64方式編碼，并將經(jīng)度和緯度坐標(biāo)值，并以異步方式提交給服務(wù)器。

3.5 服務(wù)器端接收與存儲(chǔ)

服務(wù)器端使用PHP+MySQL完成數(shù)據(jù)和文件操作。以POST方式接收和處理圖片數(shù)據(jù)和經(jīng)緯度數(shù)據(jù)，將base64格式編碼的圖片數(shù)據(jù)用base64_decode方法進(jìn)行解碼，通過唯一命名方式解決可能存在的重名覆蓋問題，最后通過文件操作函數(shù)將圖片存儲(chǔ)在服務(wù)器指定目錄。存儲(chǔ)成功后，通過MySQL數(shù)據(jù)庫(kù)的插入操作，完成圖片名稱和經(jīng)緯度數(shù)據(jù)的存儲(chǔ)。當(dāng)操作成功后，返回服務(wù)器一個(gè)操作成功的信息，最終運(yùn)行效果如圖2所示。

4 結(jié)語(yǔ)

本文是為解決在拍照和上傳照片時(shí)移動(dòng)設(shè)備面臨的“不同平臺(tái)程序不通用問題”，提出了一個(gè)基于MUI的通用解決方案，用一套程序?qū)崿F(xiàn)了拍照、裁剪、上傳、存儲(chǔ)與定位問題，該方案基于HTML5和JavaScript技術(shù)，編寫一次就能夠?yàn)锳ndroid和iOS平臺(tái)分別編譯生成相應(yīng)APP的功能，降低了開發(fā)成本，提高了開發(fā)效率，這種方案在實(shí)時(shí)性要不高的情景下提供了能夠滿足用戶的使用需求，是一種很有潛力的方案。

參考文獻(xiàn)：

[1] 肖文杰，熊素環(huán).旅游足跡照片分享網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2018，14（27）：200-201，204.

[2] 范玉慧，朱建國(guó).基于PHP的在線式教學(xué)平臺(tái)個(gè)人檔案中照片維護(hù)功能的設(shè)計(jì)與實(shí)現(xiàn)[J].教育現(xiàn)代化，2018，5（38）：148-149.

[3] 陳石平，莊桂玉，徐彬雄，等.GIS高精度目標(biāo)點(diǎn)采集器設(shè)計(jì)及其計(jì)算方法[J].全球定位系統(tǒng)，2018，43（1）：65-69.

[4] 王怡，盧琪玉，楊肖丹，等.基于時(shí)空軌跡記錄和情感體驗(yàn)的旅游足跡照片集分享的系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版），2017（18）：75-79.

【通聯(lián)編輯：代影】