利用imageCropper插件在X5平台上实现头像剪裁上传功能

Masion

先说实现的效果:
1、可以让用户自己在手机或电脑中选择图片，剪切成固定尺寸
2、可以实时查看剪裁效果
3、通过baas上传到服务器
4、跨平台运行
示例界面：

Masion

整个实例程序的代码见附件：

Masion

sykt 发表于 2016-6-6 10:56
裁剪完之后，为什么所有的input框都要引用copper.js啊？？？？？

这个是cropper里面的功能吧，不太清楚

碰到一个鸡蛋不错，你赞美它味道鲜美就可以了
没有必要弄明白那只老母鸡是怎么把它生产出来的

Masion

当用户调整完图片剪裁区域后，点击上传按钮：
        Model.prototype.button2Click = function(event){
                this.comp("button2").set({"disabled":true});   //将本按钮禁用，防止用户重复上传
                        var self=this;
                        var picName=UUID.createUUID();    //为用户上传的文件起一个名字
           var result= $('.cropper-example-1 > img').cropper("getCroppedCanvas");   //拿到剪裁后的数据
           //$(".masionStyle").html(result);
           var data=result.toDataURL();     //转成base64

                        var params = {   //准备向后台传的baas参数
                                        "image":data,    //剪裁后的图片base64码
                                        "subPath":"D:\\BeX5_V3.11\\model\\UI2\\lawranceMob\\ImageSource\\titlePic\\",     //服务器存储位置
                                        "PicName":picName    //文件名称
                        };
                        var success = function(resultData) {   // 上传之后的处理
                                if(resultData.success=="上传文件成功！"){
                                        self.comp("windowReceiver1").windowEnsure(picName);
                                }else{
                                        self.comp("messageDialog1").show({"message":result.success});
                                }
                       
                        };
                          Baas.sendRequest({
                                   "url" : "/lawrance", // servlet请求地址
                                    "action" : "uploadImageAjax", // action
                                    "params" : params, // action对应的参数
                                     "success" : success // 请求成功后的回调方法
                                 });
        };

Masion

baas后台的处理过程：

        //存储前台传过来的图片
private static void uploadImageAjax(ServletRequest request, ServletResponse response) throws ParseException, SQLException, NamingException, IOException {
        // 参数序列化
                        JSONObject params = (JSONObject) JSONObject.parse(request.getParameter("params"));
                        JSONObject jsonObj = new JSONObject();
                        String image = params.getString("image");        //拿到字符串格式的图片
                        String subPath=params.getString("subPath");
                        String PicName=params.getString("PicName");
                        System.out.println(PicName);

                        // 只允许jpg
                        String header ="data:image/jpeg;base64,";

               
                // 去掉头部
                        image=image.split(",")[1];
                //image = image.substring(header.length());
                // 写入磁盘
                String success = "fail";
                BASE64Decoder decoder = new BASE64Decoder();
                try{
                        byte[] decodedBytes = decoder.decodeBuffer(image);        //将字符串格式的image转为二进制流（biye[])的decodedBytes
                        String imgFilePath =subPath+PicName;                        //指定图片要存放的位置
                        FileOutputStream out = new FileOutputStream(imgFilePath);        //新建一个文件输出器，并为它指定输出位置imgFilePath
                        out.write(decodedBytes); //利用文件输出器将二进制格式decodedBytes输出
                        out.close();                        //关闭文件输出器
                        success = "上传文件成功！";
                        System.out.println("上传文件成功！");

                }catch(Exception e){
                        success = "上传文件失败！|"+e.getMessage();
                        e.printStackTrace();
                }
                finally{
                        jsonObj.put("success", success);
       
                        Util.writeJsonToResponse(response, jsonObj);
                }
}

Masion

总体思路：
1、利用html 的input type=file 从本地选取图片文件
2、利用imageCropper插件进行图片剪裁，同时进行剪裁效果预览
3、达到用户的剪裁效果后，利用imageCropper得到剪裁后的图片base64码
4、利用baas将base64码和在服务器上的存储路径传往后台
5、在服务器端将base64转成二进制流存到服务器制定的目录和文件中
6、返回存储结果信息

Masion

1、用input type=file导入本地文件
    <input type="file" value="" xid="inputImage" bind-change="file1Change" accept="image/*" style="display:none;"></input>

点击后的js代码为：
        Model.prototype.file1Change = function(event){
       
        //从选取文件对话框返回后，检查用户是否选择了文件，是否选择了图片文件
        if(!event.target.files){    \\如果客户没有选择相关文件，直接返回
                        return;
        }


       var $image = $('.cropper-example-1 > img');         //定义图片文件的正则表达式

        var $inputImage = $( this.getElementByXid('inputImage'));   //用jQuery拿到input标签
         var file = event.target.files[0];       //拿到用户选择的文件

          if (/^image\/\w+$/.test(file.type)) {     //如果是图片文件
           var  blobURL = URL.createObjectURL(file);   //
            $image.one('built.cropper', function () {       //则把用户新选择的图片文件用imageCropper进行剪裁
              URL.revokeObjectURL(blobURL); // Revoke when load complete
            }).cropper('reset').cropper('replace', blobURL);
            $inputImage.val('');

          } else {    //如果用户选的的不是图片文件
            this.comp("messageDialog1").show({"message":'请选择图片文件！'});

          }

        };

Masion

imageCropper插件的地址见：
http://fengyuanchen.github.io/cropper/

在X5中需要引用如下文件：
js文件：
require("../dist/cropper");
css文件：
<link href="../dist/cropper.css" rel="stylesheet"/>

这两个文件见帖子后面的附件

make

必须顶起

kkemao

必须支持。

东风

顶起来