@[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('复制成功')
                }
            }

  长按复制功能效果展示：