基于MUI的通用照片處理技術研究

曹萍萍　孫偉　雷暉　柯達權

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

關鍵詞：拍照;裁剪;上傳

中圖分類號：TP3 ? ? ? ?文獻標識碼：A

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

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

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

1 相關技術介紹

1.1 MUI框架

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

1.2 HTML5 plus Runtime

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

1.3 copper.js插件

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

2 方案設計

本文要實現的功能是通過手機拍照、裁剪和上傳照片，并記錄GPS坐標，存儲到服務器的數據庫中，操作成功后返回移動端一個成功的信息提示。基于MUI的照片拍攝和上傳功能的實現思路如圖1所示：

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

3 具體實現

3.1 拍照的實現

通過HTML5 plus Runtime調用移動設備中的攝像頭，為方便操作，使用plus.camera.getCamera方法啟用后置攝像頭，并將拍攝到的照片以隨機數命名存放，然后調用copper.js設定照片顯示區域大小，并進一步設置對該照片文件的放大縮小，最后通過移動和調整裁剪框操作完成操作。

拍照操作的代碼：

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 照片剪裁的實現

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

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 拍照位置的實現

通過使用HTML5 plus Runtime來獲取當前移動設備中的攝像頭，并通過調用默認位置，來實現采集當前位置的經緯度坐標。

3.4 照片和位置數據上傳

為方便照片數據在網絡上的傳輸，在此將照片二進制數據轉換成Base64方式編碼，并將經度和緯度坐標值，并以異步方式提交給服務器。

3.5 服務器端接收與存儲

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

4 結語

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

參考文獻：

[1] 肖文杰，熊素環.旅游足跡照片分享網站的設計與實現[J].電腦知識與技術，2018，14（27）：200-201，204.

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

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

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

【通聯編輯：代影】