Home / Blog / note

HTML手机图片上传的一些问题

Author: Vic.Wang 2016/07/03 Tags:noteHTMLmobilephoneimageupload微信图片上传

这几天被图片上传折腾的死去活来的,HTML自带的 File 控件在手机上兼容千差万别,尤其是在安卓机上,有的还没有拍照功能,有的出来WPS等乱七八糟的。

之前弄萌宝投票的时候,图片上传并没有过多的处理,也发现了几个影响性能的问题,现在的智能机拍的照片都比较大,一张图片1-3M都很正常,这就会造成上传的时候很慢,后端又没做压缩处理,上传成功后返回的文件路径,前端要显示的时候要去拉取,得到的图片大小也是原图大小,这又导致了下载慢、显示慢。

这次黄鱼的事故快速处理,又碰到了一个问题,手机竖着拍和横着拍,会有不同的图片方向,一般也不会注意到这个情况,但因为这次涉及了行驶证上传,方向一变,后端看到的就不是正的,图片斜了90°,图片上的信息不方便查看。

我就想图片在上传前,前端先处理一下,压缩下图片,改下图片宽高大小,顺便把图片转正,然后再传给后端。

查了下资料,可以用Canvas弄,本地写了个DEMO,用了 HTML5 File API 和一个获取图片信息 EXIF 的小插件,图片转正和等比缩放都比较顺利,本地也成功了,几M的大小成功的减少到了几百k,效果很明显。

图片处理Demo下载

因为通过HTML5的File API可以得到处理后的图片以base64的方式通过AJAX传给后端,为此让ZL支持了个接口,但传的过程中遇到问题,base64太大,浏览器卡死,自己写测试DEMO的时候,用的是Apache的环境,是可以的,换成项目用的node环境,就死活过不去,node里面报错,意思是实体太大,发不过去。

上面虽然能解决图片的问题,但是关键的拍照功能还是没有啊。

后来SS让我加个属性 capture="camera" 能调用摄像头的,原谅我吧,不知道有这个属性。。

试了下调不成功,觉得这个属性可能也有兼容问题。

后来发现些问题:将 accept 改成 image/* 就可以成功调出摄像头。

    /*不成功*/
    

    /*成功*/
    
                    

但是上面node报错那个问题,对node不是很了解,问题解决不了,没法传到后端让后端看效果,后端也不知道实现的对不对,该方案只能放弃了。

产品哥说为什么不用微信的图片上传的接口,考虑到机型兼容性好,图片上传也会压缩,方向也正确,行,那就换微信JSSDK的吧。

微信的图像接口,提供了【拍照或从手机相册选图接口】【预览图片接口】【上传图片接口】【下载图片接口】

一开始的时候微信选图的文件框死活不出来,开启了config的debug,一直提示config:invalid signature,config各个参数也都正确,而且PC上的微信开发工具也成功,但是在手机上就是不出来,这个问题困扰了我一天多,无论我改代码位置、执行顺序、延迟加载一直提示config注入失败,我就很纳闷了,同样的账号,同样的路径,同样的config配置,手机上这么就不行??

而且微信的东西还不好调试,只能改一点,svn提交一遍,发布一遍,周六的时候从早上弄到晚上,不知道发上去了多少个版本。

查了下网上的问题,说是签名不对,再仔细看了下签名的生成规则,签名用到的当前url是要取#(哈希)之前的部分的。比如:

http://mingsixue.com/weixin/upload.html#submit,就要取http://mingsixue.com/weixin/upload.html这部分,#后面的要舍弃,不然的话签名会一直不通过。

    location.href.split('#')[0]
                    

参考链接:

微信公众平台, config:invalid signature一直爆这个错误,求教如何解决?

微信公众平台一直都是invalid signature