H5+对手机相机的调用：调用相机模组

  @[toc]

  一.效果图展示

  基本样式如下：

  上传照片之后，上传到服务器之后，进行调用文字识别和翻译API之后返回到该页面，之后的效果图：

  二. 前端样式以及JS控制转码

  这部分主要是H5+对手机相机的调用：

  1.首先，把mui的css和js引入到我的页面中：（准备工作）

  2.前端元素样式-》输入框和ui元素的使用：

  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);

  裁切完成取消显示裁切框,确定裁切后销毁裁切组件，标记一下js裁剪上传图片的插件，下次继续裁切时需要初始化一下裁切组件,禁用几个功能按钮，向后台提供数据

   $("#userImage_id").cropper("replace", imgUrl);

 $("#userImage_id").cropper("clear"); 
 $("#userImage_id").cropper("disable");
 window.imageDisable = true;
 $("button.toolbutton").prop("disabled", true);

  2.4 前端文件上传给服务器（AJAX）

  使用uploadFile(image)方法：

   var rootPath = "http://XXXXXX:2313";

  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-textjs裁剪上传图片的插件，每次触发事件就会使用 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('复制成功')
 }
}

  长按复制功能效果展示：