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

zhj880404

楼主，哪有问题呢，能这样写吗

youmi

请问，为什么手机端不能点开选择文件的弹出框啊，在手机端点选择，没有任何反应，inputImage组件是隐藏起来的，如果把这个组件显示出来，在手机端点击这个组件，可以弹出选择相册或拍照的对话框，

Masion

input type=file这个组件不能用css进行修饰，直接放在界面上太难看
所以隐藏起来
在另外一个按钮的单击事件中
添加触发 inputChange事件 调用input type=file来取本地文件

youmi

有没有将上传的图片进行在线编辑的功能

Masion

youmi 发表于 2015-7-29 15:50
有没有将上传的图片进行在线编辑的功能

这个木有

youmi

Masion 发表于 2015-7-30 16:52
这个木有

现在有这么一个问题，能不能在使用拍照的时候，将照片上传给附件，因为附件是以file的形式上传，如果是拍照直接返回给附件，可能需要编码转换，但如果在拍照结束后，保存在手机相册，返回照片所在地址，在后台以附件的形式上传，这样可以吗，
还有一个问题，为什么用手机浏览器不能实现拍照，定位，说是未定义，是不是访问不到插件啊，用app是把插件打包的，是这个原因吗

yang2061983

Masion 发表于 2015-6-22 20:48
当用户调整完图片剪裁区域后，点击上传按钮：
        Model.prototype.button2Click = function(event){
                this.c ...

楼主很牛，现在我遇到一个问题，我使用该功能对一些图片进行截图后上传提示
经过与你沟通，你说是因剪切出来的imgdata太大了，使用压缩方法就是在upload时的这句加上尺寸就好了：
var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas",{width: 200,height: 200});
经过使用该方法原图为10几K的图片还是提示上图的问题，[size=13.6842107772827px]将宽度和高度改成100就可以上传了，
[size=13.6842107772827px]我又上传一个原图未170多K的图片使用高度和宽度为100就会提示上图问题，将[size=13.6842107772827px]宽度和高度改成50就才可以上传[size=13.6842107772827px]，但是从服务上看到此图非常模糊不能使用。
[size=13.6842107772827px]现在原图太大导致不能post到后台，检查了很多还是不知道哪里出问题了。
请教楼主能否帮忙解决一下，我想以后再有人用这个遇到问题时就可以完整的参考你这篇帖子了，我离成功就差一步。
[size=13.6842107772827px]附上源码

sagelin

楼主，我这边发现一个很奇怪的问题，用你这个方法，在电脑的浏览器上没有问题，一切正常，但是打包安装到ios8上面，选择文件后，点确定调用后台的方法，action和params都传不到后台，到java端取来出来这两个参数都为null,折腾了很久，搞不清楚是什么问题，有没有人遇到啊，其它的方法都可以正常传参到后台。就这个头像剪裁的功能不能传参到后台。

sagelin

解决问题了，原来是图片太大的原因，用兄弟的解决方法{width: 90,height: 90})方法限制后是可以了，但是又发现了一个新的问题，竖拍的图片上传后会左转90度，倒过来了，但是横拍的照片是正常的。这个又不懂怎么解决了，有人碰到过吗？……

Masion

sagelin 发表于 2015-8-12 01:53
解决问题了，原来是图片太大的原因，用兄弟的解决方法{width: 90,height: 90})方法限制后是可以了，但是又 ...

关于这个问题，imageCropper的作者在他的gitHub中已经写明了问题和解决问题的线索
About getCroppedCanvas method: The canvas.drawImage API in some Mac OS / iOS browsers will rotate an image with EXIF Orientation automatically, so the output cropped canvas may be incorrect. To fix this, you may upload the cropped data and crop the image in the server-side, see the example: Crop Avatar. Or you may handle the EXIF Orientation in server first before to use cropper