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

ntangjr

楼主你好，
您的这个方案在大部分手机上可以正确运行，但在个别Android手机上会报错。报错发生在从相册选择照片时。
手机型号分别为：华为麦芒4，Android 5.1，三星SM-N9150，Android5.0.1，华为荣耀6PLUS，Android4.4.2

ipan

点击选择按钮后执行$(this.getElementByXid('inputImage')).click();能够触发file组件的click事件吗？
我自己做了demo，普通html上面是没问题的；但是，在wex5里面就不行了！！！搞不清啥原因；

ipan

你好！！！
测试了你的程序，谷歌浏览器在电脑浏览器下正常；但是按F12进入调试页面，选择苹果手机测试试试！会发现弹不出文件选择框！！！

dearshine

Masion 发表于 2015-6-22 20:50
整个实例程序的代码见附件：

你好技术牛人，按照你的方法已经成功实现基本需求了，现在有个问题就是图片如果太大裁剪后也很大，占用不必要的内存，可以怎样修改下，自动把图片的像素变小一点呢？判断宽度如果大于600px就改成600px，高度等比例缩小

Masion

dearshine 发表于 2016-7-25 22:03
你好技术牛人，按照你的方法已经成功实现基本需求了，现在有个问题就是图片如果太大裁剪后也很大，占用不 ...

那就用图片压缩组件呀
我在后面有追加了压缩图片的方法

Masion

ipan 发表于 2016-7-25 16:30
你好！！！
测试了你的程序，谷歌浏览器在电脑浏览器下正常；但是按F12进入调试页面，选择苹果手机测试试试 ...

这个应该和本插件的代码没关系
它是调用浏览器的文件拾取对话框去拿文件
至于显不显示对话框，显示什么对话框，就要看浏览器的相关配置了

不羁的风

Masion 发表于 2016-7-26 08:25
这个应该和本插件的代码没关系
它是调用浏览器的文件拾取对话框去拿文件
至于显不显示对话框，显示什么对 ...

F12调试的时候一切都没问题。之后模式一打包的，不知道为什么打包之后部署到服务器，然后模拟器打开App  界面如第二张图，图片移动不了，点击inputImage无反应，无法选择手机内的图片，点击上传报错如图。浏览器打开却没有问题！

sxscjg

MARK

resekk

使用楼主的案例在官方收录之前，通过探索，图片上传假死，卡慢的解决办法，与大家分享

上传的图片太大，如果把分辨率做得比较大，那么要上传到后台的数据就很大，
比如本人上传分辨率为1000*500，上传的数据就有1.5M左右，造成客户端假死30s左右，有时候由于网络原因，造成上传不成功

原因分析：
这个地方：var data = result.toDataURL();
将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现
而toDataURL(type, ratio)函数，参数type在image/png，image/jpeg,image/svg+xml等 MIME类型中选择（可以不填，默认是image/png）。如果是type = “image/jpeg”，可以有第二个参数，如果第二个参数ratio的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。
toDataURL()如果不填参数，那么默认是image/png，这个格式的图片数据量是很大的，

解决办法
使用：result.toDataURL("image/jpeg", 0.8)，使用image/jpeg格式，即使不压缩，分辨率1000*500的图片数据在250K左右，是原来图片大小1/5！ get!

Masion

resekk 发表于 2016-11-13 16:29
使用楼主的案例在官方收录之前，通过探索，图片上传假死，卡慢的解决办法，与大家分享

上传的图片太大，如 ...

我在回帖中提供了js压缩图片的方法