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

QQ登录

只需一步,快速开始

楼主: Masion

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

  [复制链接]

0

主题

4

帖子

11

积分

新手上路

Rank: 1

积分
11
QQ
发表于 2015-7-15 17:25:39 | 显示全部楼层
顶一个顶一个顶一个顶一个顶一个
回复 支持 反对

使用道具 举报

31

主题

210

帖子

454

积分

中级会员

Rank: 3Rank: 3

积分
454
QQ
发表于 2015-7-16 15:02:54 | 显示全部楼层
Masion 发表于 2015-6-22 20:42
imageCropper插件的地址见:
http://fengyuanchen.github.io/cropper/

请问楼主,这个imageCropper插件只有用php做的吗?在WeX5平台怎么用呢?
回复 支持 反对

使用道具 举报

31

主题

210

帖子

454

积分

中级会员

Rank: 3Rank: 3

积分
454
QQ
发表于 2015-7-16 15:06:12 | 显示全部楼层
gzcyp2000 发表于 2015-7-3 20:25
插件安装已解决,非常好用。

请问怎么安装的?
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-16 16:20:22 | 显示全部楼层
flying2fish 发表于 2015-7-16 15:06
请问怎么安装的?

你可以下载附件
看附件历史怎么引用的
长春鱼熊企业管理咨询有限公司



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

使用道具 举报

31

主题

210

帖子

454

积分

中级会员

Rank: 3Rank: 3

积分
454
QQ
发表于 2015-7-17 08:53:10 | 显示全部楼层
Masion 发表于 2015-7-16 16:20
你可以下载附件
看附件历史怎么引用的

谢谢
回复 支持 反对

使用道具 举报

112

主题

315

帖子

754

积分

高级会员

Rank: 4

积分
754
QQ
发表于 2015-7-22 11:25:36 | 显示全部楼层
Masion 发表于 2015-6-22 20:48
当用户调整完图片剪裁区域后,点击上传按钮:
        Model.prototype.button2Click = function(event){
                this.c ...

存储图片是将路径存到数据库呢,还是二进制形式存到数据库中?
回复 支持 反对

使用道具 举报

6

主题

17

帖子

46

积分

新手上路

Rank: 1

积分
46
QQ
发表于 2015-7-24 10:06:19 | 显示全部楼层
楼主,我上传图片到后台,后台解码以图片的格式上传到服务器,服务器里的图片颜色变雾了,这是怎么回事呢
回复 支持 反对

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
 楼主| 发表于 2015-7-24 10:18:18 | 显示全部楼层
zhj880404 发表于 2015-7-24 10:06
楼主,我上传图片到后台,后台解码以图片的格式上传到服务器,服务器里的图片颜色变雾了,这是怎么回事呢 ...

你是不是加压缩语句了???
var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas",{width: 200,height: 200});
把他的像素调大点儿
长春鱼熊企业管理咨询有限公司



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

使用道具 举报

6

主题

17

帖子

46

积分

新手上路

Rank: 1

积分
46
QQ
发表于 2015-7-24 11:02:54 | 显示全部楼层
楼主,给看看

截图前

截图前

上传到服务器后

上传到服务器后
回复 支持 反对

使用道具 举报

6

主题

17

帖子

46

积分

新手上路

Rank: 1

积分
46
QQ
发表于 2015-7-24 11:04:52 | 显示全部楼层
前台数据获得
var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas",{width: 200,height: 200});
                //$(".masionStyle").html(result);
                var data = result.toDataURL();
后台数据
BASE64Decoder decoder = new BASE64Decoder();
        try {
            //通过Base64解密,将图片数据解密成字节数组
            byte[] bytes = decoder.decodeBuffer(fileData);
            for(int i=0;i<bytes.length;++i)  
            {  
                if(bytes[i]<0)  
                {//调整异常数据  
                    bytes[i]+=256;  
                }  
            }
            //构造字节数组输入流
            ByteArrayInputStream bais = new ByteArrayInputStream(bytes);
            //读取输入流的数据
            BufferedImage bi = ImageIO.read(bais);
            //将数据信息写进图片文件中
            ImageIO.write(bi, "jpg", f);// 不管输出什么格式图片,此处不需改动
            bais.close();
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 08:04 , Processed in 0.084383 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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