文档章节

HTML5+Canvas手机拍摄,本地压缩上传图片,案例实测报告。

think2011
 think2011
发布于 2013/09/12 10:32
字数 471
阅读 22760
收藏 28

  做了个微信的HTML5拍摄上传照片功能,问题重重...

  前端代码

$(':file').on('change',function(){
        var file = this.files[0];
        var url = webkitURL.createObjectURL(file);

        /* 生成图片
        * ---------------------- */
        var $img = new Image();
        $img.onload = function() {

            //生成比例
            var width = $img.width,
                    height = $img.height,
                    scale = width / height;
            width = parseInt(800);
            height = parseInt(width / scale);

            //生成canvas
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
            $canvas.attr({width : width, height : height});
            ctx.drawImage($img, 0, 0, width, height);
            var base64 = $canvas[0].toDataURL('image/jpeg',0.5);

            //发送到服务端
            $.post('upload.php',{formFile : base64.substr(22) },function(data){
                $('#php').html(data);
            });

        }
        $img.src = url;

    });

后端代码


$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );


实测:

电脑端

chrome 版本29,上传成功,源图片3M,压缩后1024 * 比例,约250kb 通过!

移动端

android 版本4+,微信,点击上传无反应,在手机浏览器中打开可上传,拍摄约3M-,压缩后1024* 比例,约3M-,根本没压缩嘛!!! 失败!

iphone4 & 4s 版本6+ 微信,拍摄约3M-,压缩后1024 * 比例,约250kb 通过!

iphone5 版本6+ 微信,生成canvas变形。失败!


 

总结:系统级BUG,无解.... 这下不知道怎么办了.. 

--------------------------------------- 后续报告 2013年09月12日 ----------------------------------------------

找到个牛人写的javascript编译jpg的插件,javascript_jpeg_encoder。

用这个办法可以解决android无法压缩图片的问题。


目前还剩2个系统级BUG。

1. 微信android版本无法响应上传控件 input tyle=file;

2. iphone5 生成canvas失败,画面扭曲。


--------------------------------------- 后续报告2 2013年10月10日 ---------------------------------------------

同样有一位牛人写的 ios-imagefile-megapixel 插件,解决了iphone5+画面扭曲的问题。

目前还剩1个系统级BUG。

  1. 微信android版本无法响应上传控件 input tyle=file;


--------------------------------------- 后续报告3 2014年5月16日 ---------------------------------------------

目前所有问题都解决了,在github上建立了插件,有需要的朋友可以去获取一下,顺便说一下,时间过的真快。:D


© 著作权归作者所有

共有 人打赏支持
think2011
粉丝 23
博文 7
码字总数 3684
作品 1
广州
程序员
私信 提问
加载中

评论(55)

tubexu
tubexu
安卓手机上传不了,报错哦。 has no method ‘createObjectUrl’
无忘
先谢谢楼主,再观摩!
DValue
DValue
谢谢楼主,我试过在三星的Note3 跟 4下,微信内置的浏览器 点击是没有任何反应的,能不能解决呢?
烈冰
烈冰
正好需要,谢谢楼主,什么时候能提供jquery版本呢?
jdk2010
jdk2010
大神,方向问题能不能解决啊
苏定水
Chrome
Uncaught ReferenceError: MegaPixImage is not defined

微信不能用~~~~~~~
j
jwinder
华为荣耀6,Android 4.4.2 ,微信5.3.1不行,自带的浏览器没有问题
y
yu2rui
安卓目前最新版的微信5.3.1还是无法响应,好像之前的5.2版本是可以的,现在又不行了,这个问题一直困扰着,不知道有没有人有其他的解决方法!!
陌陌不得语
陌陌不得语

引用来自“smilingsmile”的评论

为什么我用苹果4s测试的时候,本地现有图片上传的图片方向不对呢?

引用来自“wipeouter”的评论

这个问题我也遇到……

引用来自“think2011”的评论

如果有引入 mobileBUGFix.mini.js 这个是修复手机端BUG的, 方向不对是因为修复导致的,但总比出问题好吧,暂时没去找解决方案。
@think2011 大神, 安卓4.4下 input无法响应, 有解决办法么, 我找了很久找不到方法 .
think2011
think2011

引用来自“smilingsmile”的评论

为什么我用苹果4s测试的时候,本地现有图片上传的图片方向不对呢?

引用来自“wipeouter”的评论

这个问题我也遇到……
如果有引入 mobileBUGFix.mini.js 这个是修复手机端BUG的, 方向不对是因为修复导致的,但总比出问题好吧,暂时没去找解决方案。
H5 和小程序拍照图片旋转、压缩和上传

原文地址:github.com/whinc/blog/… 最近接到一个“发表评论”的需求:用户输入评论并且可以拍照或从相册选择图片上传,即支持图文评论。需要同时在 H5 和小程序两端实现,该需求处理图片的...

whinc
2018/09/29
0
0
HTML5+Canvas手机拍摄,本地压缩上传图片 安卓微信浏览器无法调用摄像头

@think2011 你好,想跟你请教个问题:在 安卓 微信浏览器上,file控件是有响应的,能上传图片等,但是就是无法调用摄像头功能(某些安卓手机能正常调用,第三方浏览器能正常使用),苹果手机无问题,...

那年花开
2014/06/23
6.4K
2
TakePhotoV2.0.0新版隆重发布

TakePhotoV2.0.0 详细介绍及使用方式请查看GitHub,传送门---------> TakePhoto V2.0.0 说明 对于现在的APP开发,项目中一般都会有图片上传的功能,简单的功能就是头像上传,复杂一点的就是类...

ostracod
2017/11/11
0
0
TakePhotoV2.0.0新版隆重发布

TakePhotoV2.0.0 详细介绍及使用方式请查看GitHub,传送门---------> TakePhoto V2.0.0 说明 对于现在的APP开发,项目中一般都会有图片上传的功能,简单的功能就是头像上传,复杂一点的就是类...

ostracod
2017/11/11
0
0
基于移动端的图像抓拍传输及其图像自动管理系统

【业务需求】 本系统为实验性质,无需任何设计美工参与,图片等素材一般即可。界面什么都无需设计。 详细功能要求: 1移动端部分(只要能在android5.1和5.0运行即可) 用户在进入植物研究者拍...

leyi6
2016/03/27
6
0

没有更多内容

加载失败,请刷新页面

加载更多

求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
43分钟前
2
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
55分钟前
3
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
今天
1
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
今天
1
0
java8的时间和`Date`的对比

java8的时间和Date的对比 java8提供了新的时间接口。相对Date,Calendar,个人感觉最大的好处是对时间操作的学习成本很低,比Calendar低。 1. LocalDate,LocalTime,LocalDateTime LocalDate 代...

北风刮的不认真了
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部