起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 111946|回复: 136

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

  [复制链接]

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
发表于 2015-6-22 20:29:31 | 显示全部楼层 |阅读模式
版本: 小版本号:
数据库: 服务器操作系统: 应用服务器:
客户端操作系统: 浏览器:
先说实现的效果:
1、可以让用户自己在手机或电脑中选择图片,剪切成固定尺寸
2、可以实时查看剪裁效果
3、通过baas上传到服务器
4、跨平台运行
示例界面:

捕获.PNG

评分

参与人数 5威望 +81 +50 收起 理由
Story + 10 很给力!
X5联盟帮扶部 + 50 为阅读量突破15000而顶!d=====( ̄▽ ̄*)b.
暗夜的忧伤 + 15 很给力!
make + 50 很给力!
费曼 + 6 赞一个!

查看全部评分

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:50:29 | 显示全部楼层
整个实例程序的代码见附件:

picCut.zip

196.09 KB, 下载次数: 5194

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 1 反对 0

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2016-6-6 11:41:41 | 显示全部楼层
sykt 发表于 2016-6-6 10:56
裁剪完之后,为什么所有的input框都要引用copper.js啊?????

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

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

评分

参与人数 1威望 +10 收起 理由
不羁的风 + 10 神马都是浮云

查看全部评分

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 1 反对 0

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:48:17 | 显示全部楼层
当用户调整完图片剪裁区域后,点击上传按钮:
        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 // 请求成功后的回调方法
                                 });
        };

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 1 反对 0

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:49:13 | 显示全部楼层
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);
                }
}
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 1 反对 0

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:35:01 | 显示全部楼层
总体思路:
1、利用html 的input type=file 从本地选取图片文件
2、利用imageCropper插件进行图片剪裁,同时进行剪裁效果预览
3、达到用户的剪裁效果后,利用imageCropper得到剪裁后的图片base64码
4、利用baas将base64码和在服务器上的存储路径传往后台
5、在服务器端将base64转成二进制流存到服务器制定的目录和文件中
6、返回存储结果信息
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:40:28 | 显示全部楼层
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":'请选择图片文件!'});

          }

        };

长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-6-22 20:42:27 | 显示全部楼层
imageCropper插件的地址见:
http://fengyuanchen.github.io/cropper/

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


这两个文件见帖子后面的附件
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

6

主题

185

帖子

2825

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2825
发表于 2015-6-22 21:51:57 | 显示全部楼层

必须顶起
回复

使用道具 举报

6

主题

32

帖子

82

积分

初级会员

Rank: 2

积分
82
QQ
发表于 2015-6-22 21:59:06 | 显示全部楼层
必须支持。

点评

支持一下!! www.shabixiaoshuo.com/book/1/1376/ 逃脱  发表于 2017-3-18 19:24
回复 支持 反对

使用道具 举报

23

主题

126

帖子

207

积分

中级会员

Rank: 3Rank: 3

积分
207
QQ
发表于 2015-6-23 09:15:07 | 显示全部楼层
顶起来
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 03:25 , Processed in 0.114928 second(s), 30 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表