智能手机用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");

}
}
}

相关文章

精彩推荐