智能手机用jQuery-File-Upload上传图片及问题总结
作者：袖梨
2022-11-14
最近在做一些活动站点，有几个是通过手机来上传图片。
先推荐个上传插件：
jQuery-File-Upload
https://github.com/blueimp/jQuery-File-Upload
之前一直用的uploadify，免费版的在手机端里貌似不支持swf，然后用的uploadfive，会出现各种的bug 最终选用这个jquery-upload用的效果还是不错的。
列举一下简单的用法：
| 代码如下 | 复制代码 |
| //首先引入js //初始化 //input | |
2.最终效果是吧用户上传的图片进行处理，生成一张新的图片。用的方法是放到canvas进行渲染合成图片。
这里会有遇到一个问题，在iphone 系统7.x的版本中，用户选择拍照上传照片处理合成的图片会被压扁。
这里的问题只出现在iphone 7.x的版本中。
原因是上传的图片尺寸过大。而导致的canvas里生成的图片压扁。
解决办法就是在后台上传图片的时候把图片处理一下。
我做的办法是：获取下尺寸，只要超过3000的就给压缩了一半的尺寸。这问题就解决了。
3.还有一个问题就是在iphone图片竖着拍的时候，在上传照片的时候，上传上去是倒着的。但是，横着拍的照片上传上去是正常的。
这里做了一个判断处理
| 代码如下 | 复制代码 |
| $templateInfo = @getimagesize($tempFile); $src_image[0] = $this->_getImgRef($tempFile); if ($templateInfo[2] == 2) { $pic = exif_read_data($tempFile); if (isset($pic['Orientation'])) { if ($pic['Orientation'] == 6) { $tt = 1;//已经保存 $degrees = 270; $src_image[0] = imagerotate($src_image[0], $degrees, 0); //imagejpeg($src_image[0],'test'.'.'.$fileParts['extension']);//重新保存图片 //$this->resizeImage($src_image[0], $templateInfo[0]/2, $templateInfo[1]/2, $targetFile); $this->_saveImg($tempFile,$src_image[0],$targetFile); //图片处理过大进行裁剪 if($templateInfo[0]>3000 || $templateInfo[1]>3000){ $image = new ＼ Think＼ Image(); $image->open($targetFile); $image->thumb($templateInfo[0]/2,$templateInfo[1]/2)->save($targetFile); } $this->ajaxReturn("222"); } } } | |
