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

yang2061983

打安卓包时，选上增强型浏览器，点击就无响应。
不选增强型浏览器，有的图片打不开。

feng2qin

这个鬼必须要用增强型浏览器啊

atfa

Masion 发表于 2015-7-29 13:27
input type=file这个组件不能用css进行修饰，直接放在界面上太难看
所以隐藏起来
在另外一个按钮的单击事件 ...

隐藏起来的file input组件，在pc浏览器上可以依靠另一个按钮来触发，但是在移动浏览器上，甚至是在chrome的开发者工具视图中，都无法触发。怎么解决呢？谢谢。

atfa

atfa 发表于 2015-12-3 16:21
隐藏起来的file input组件，在pc浏览器上可以依靠另一个按钮来触发，但是在移动浏览器上，甚至是在chrome ...

问题已解决：


html：

<a href="javascript:void(0);" class="file">点击这里选择图片
                <input type="file" value="" xid="file1" bind-change="imageFileChange"
                  accept="image/*" title="支持jpg、jpeg、gif、png格式，文件小于2M"/>

              </a>

css：
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

tomnet

楼主遇见个鬼问题，原图108K, 剪切后，700多k，  
设置参数里面，不自动剪切的话，

var result= $('.x-panel-content > img').cropper("getCroppedCanvas");
var data=result.toDataURL();   这句有保错，不能得到base64 的数据，

Masion

什么报错信息呢？

dingjianqun

好，非常到位

flygis

楼主厉害，不过我今天测试
如果cropBoxResizable: false，设为true，上传前调整一下取景框大小或者新选择一个图或移动一下图片，再上传的时候就会出现baas直接调用服务端的时候很容易出现request参数为null，前端直接就调success函数，结果参数未初始化，报错了。不知道有没有遇到过

Masion

flygis 发表于 2015-12-19 14:44
楼主厉害，不过我今天测试
如果cropBoxResizable: false，设为true，上传前调整一下取景框大小或者新选择一 ...

没有呀
打调试看一下
看看错误发生在什么地方

flygis

我这边挺频繁的，我是用内置的chrome浏览器调试的。现在暂时解决方法是在baas.js里面加了一行判断，如果返回的txt为空，就把返回json设为null，外面判断，就不会直接报错了