基于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.

【通联编辑：代影】