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

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

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

中圖分類號：TP3 ? ? ? ?文獻標(biāo)識碼：A

文章編號：1009-3044（2019）13-0232-02

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

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

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

1.1 MUI框架

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

1.2 HTML5 plus Runtime

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

1.3 copper.js插件

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

2 方案設(shè)計

本文要實現(xiàn)的功能是通過手機拍照、裁剪和上傳照片，并記錄GPS坐標(biāo)，存儲到服務(wù)器的數(shù)據(jù)庫中，操作成功后返回移動端一個成功的信息提示?；贛UI的照片拍攝和上傳功能的實現(xiàn)思路如圖1所示：

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

3 具體實現(xiàn)

3.1 拍照的實現(xiàn)

通過HTML5 plus Runtime調(diào)用移動設(shè)備中的攝像頭，為方便操作，使用plus.camera.getCamera方法啟用后置攝像頭，并將拍攝到的照片以隨機數(shù)命名存放，然后調(diào)用copper.js設(shè)定照片顯示區(qū)域大小，并進一步設(shè)置對該照片文件的放大縮小，最后通過移動和調(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 照片剪裁的實現(xiàn)

裁剪照片需要前期先配置copper.js，，以控制顯示區(qū)域的大小、圖像縮放和移動、裁剪區(qū)域縮放和拖動等各參數(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 拍照位置的實現(xiàn)

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

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

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

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

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

4 結(jié)語

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

參考文獻：

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

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

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

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

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