最新消息:修改中。。。

iphone手机在上传图片问题总结

PHP BlueTea 4404浏览 0评论

最近在做一些活动站点,有几个是通过手机来上传图片。

先推荐个上传插件:

jQuery-File-Upload

https://github.com/blueimp/jQuery-File-Upload

之前一直用的uploadify,免费版的在手机端里貌似不支持swf,然后用的uploadfive,会出现各种的bug 最终选用这个jquery-upload用的效果还是不错的。

列举一下简单的用法:


//首先引入js

<script src="__PUBLIC__/js/jquery.min.js"></script>

<script src="__PUBLIC__/qupload/js/vendor/jquery.ui.widget.js"></script>

<script src="__PUBLIC__/qupload/js/jquery.iframe-transport.js"></script>
<script src="__PUBLIC__/qupload/js/jquery.fileupload.js"></script>

 

//初始化

<script type="text/javascript">
//uploadingBox.uploadingBoxShow();

$("#fileField").fileupload({
url:"{:U('Home/Index/upload')}",//文件上传地址,当然也可以直接写在input的data-url属性内
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png']
},
add: function (e, data) {
uploadingBox.uploadingBoxShow();
data.submit();
},
//formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
done:function(e,result){
$('#container_box').hide();
//done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
//注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
//返回的数据在result.result中,假设我们服务器返回了一个json对象
if(result.result == "111" || result.result == "222"){
window.location="{:U('Home/Index/photo')}";
}
else if(result.result == "Invalid file type."){
alert("请选择图片类型的文件上传");
}
else{
alert(result.result.msg);
}
// console.log(JSON.stringify(result.result));
}
})
</script>

 

//input

<input type="file" name="fileField" class="file" id="fileField" size="28" />

 

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");

          }
     }
}

 

 

转载请注明:码农生活-田伟博客 » iphone手机在上传图片问题总结

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (7)

  1. 不错,支持一下,欢迎回访
    冯耀宗3年前 (2014-12-01)回复
  2. 总结是比较花时间的,www.veryarm.com认真看了
    VeryARM3年前 (2014-12-08)回复
  3. sdsdf
    sdsf2年前 (2015-03-11)回复
  4. 一兄弟说老婆跟一男的跑了,说得很难过,要我请去酒吧。在酒吧安慰了他半天后才知道原来只是他老婆带儿子回娘家了
    王心如2年前 (2016-01-21)回复
  5. 好文一定要顶,支持一下
    王心如2年前 (2016-01-21)回复
  6. #广东硅谷学院#学好IT好就业选硅谷IT,学技能拿文凭事半功倍,紧跟专业教师一起冲浪IT行业。我们有建设学习型专业师资团队,教师领跑学生紧随其后。(QQ:800015777,电话0754-88989555)
    广东硅谷学院1年前 (2016-07-26)回复
  7. a货批发 Hermes(爱马仕)Michael Kors(MK)bailin(百临)Longines(浪琴)yuandan.cf
    一手货源4个月前 (03-19)回复