一.效果图展示
基本样式如下：
上传照片之后，上传到服务器之后，进行调用文字识别和翻译API之后返回到该页面，之后的效果图：
二. 前端样式以及JS控制转码
这部分主要是H5+对手机相机的调用：
1.首先，把mui的css和js引入到我的页面中：（准备工作）
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
2.前端元素样式-》输入框和ui元素的使用：
<div class="mui-content">
<div style="text-align: center; padding: 50px;">
<input type="button" id="headImage" value="附件" />
<input type="button" id="uploadImage" value="上传" />
</div>
<!--放图片元素-->
<ul id="imgaes">
</ul>
</div>
2.1 H5+中的调用相机模块和图库
在H5+里面调用的相机模块和图库之后到页面，展示出来为后面裁剪照片做准备：
拍照和相册选择如下：
document.getElementById("moreMenus").addEventListener("tap", function() {
var editButtons = new Array();
editButtons.push({
title: "拍照上传",
style: "default"
});
editButtons.push({
title: "从相册选择",
style: "default"
});
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: editButtons
}, function(e) {
var index = e.index;
switch (index) {
case 1:
captureImage();
break;
case 2:
selectImage();
break;
}
});
});
调用效果图如下：
2.2 拍照上传和从相册里上传的js控制如下
拍照的具体JS控制如下：
var cmr = plus.camera.getCamera(2);
在调用设备的相机模块之后，将图片地址转换：
function(path) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var newPath = entry.toLocalURL() + "?version=" + Math.random();
loadImage(newPath);
});
},
调用相机模组成功：下图为调用相机模组成功的截图
从相册里上传JS相关的JS控件如下：选择图片：
function selectImage() {
plus.gallery.pick(function(path) {
loadImage(path);
}, function(e) {
mui.toast("没有选择图片.");
});
}
确定选择图片的JS相关的Js控制器如下：
其中调用这个函数的时候path为当前的上传发图片在本机的图片的URL：对其进行一个保存之后，在前端进行一个覆盖图层，启用几个功能按钮。
function loadImage(path) {
var img = document.getElementById("userImage_id");
img.src = path;
if (window.imageDisable == true) {
$("#userImage_id").cropper("enable");
}
$("#userImage_id").cropper("replace", path);
//启用几个功能按钮
$("button.toolbutton").prop("disabled", false);
document.getElementById("userImage_id").onclick = function() {
plus.runtime.openFile(path);
}
}
2.3 使用cropper框架实现前端裁剪
在使用这个cropper框架之前，我们需要先设定其的宽度和长度：
var dataURL = $("#userImage_id").cropper("getCroppedCanvas", {
width: 300,
height: 300
});
使用toDataUR方法，将图片文件流转码为base64的格式：代码如下：
var imgUrl = dataURL.toDataURL("image/png", 1);
裁切完成取消显示裁切框,确定裁切后销毁裁切组件，标记一下，下次继续裁切时需要初始化一下裁切组件,禁用几个功能按钮，向后台提供数据
$("#userImage_id").cropper("replace", imgUrl);
$("#userImage_id").cropper("clear");
$("#userImage_id").cropper("disable");
window.imageDisable = true;
$("button.toolbutton").prop("disabled", true);
uploadFile(imgUrl);
2.4 前端文件上传给服务器（AJAX）
使用uploadFile(image)方法：
var rootPath = "http://XXXXXX:2313";
var url = rootPath + "/photo";
rootPath为后端服务器的ip地址，url为本地目标图片的文件
使用AJAX，将imageBase64文件流传递给我的后端，进行一个图片处理，和相关的API调用。
mui.ajax(url, {
dataType: "json",
type: "post",
data: {
imageBase64: image
},
success: function(data) {
if (data.result == "success") {
mui.toast("上传成功!");
document.getElementById("imagePath_div").innerText = data.message;
document.getElementById("imagePath_div2").innerText = data.overtranslate;
return;
}
mui.toast(data.message);
},
error: function(a, b, c) {
mui.toast("上传头像出现错误，请稍后再试!");
}
});
2.5 附加功能之前端长按复制
激活长按按钮
mui.init({
gestureConfig: {
longtap: true, //默认为false
}
});
使用mui的长按事件 我把我的复制元素 class 设置为copy-text，每次触发事件就会使用 innerText 获取纯文本，加了一个确认框 让用户选择是否复制，判断是安卓还是ios。
设置 复制的内容也就是 触发事件 innerText 获取的内容
mui('body').on('longtap', '.copy-text', function() {
var copy_content = this.innerText;
mui.confirm('您要复制内容吗？', '题小满', ['取消', '复制内容'], function(e) {
if (e.index == 1) {
if (mui.os.ios) {
var UIPasteboard = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
generalPasteboard.plusCallMethod({
setValue: copy_content,
forPasteboardType: "public.utf8-plain-text"
});
generalPasteboard.plusCallMethod({
valueForPasteboardType: "public.utf8-plain-text"
});
mui.toast('复制成功')
} else {
var context = plus.android.importClass("android.content.Context");
var main = plus.android.runtimeMainActivity();
var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
plus.android.invoke(clip, "setText", copy_content);
mui.toast('复制成功')
}
}
})
长按复制功能效果展示：
