文档章节

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

think2011
 think2011
发布于 2013/09/12 10:32
字数 471
阅读 22716
收藏 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
09/29
0
0
HTML5+Canvas手机拍摄,本地压缩上传图片 安卓微信浏览器无法调用摄像头

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

那年花开
2014/06/23
6.3K
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
H5拍照应用开发经历的那些坑儿

一、项目简介 1.1、项目背景: 这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮。 1.2、系统...

我是李达康
2015/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iOS切面编程

aop编程(面向切面编程),其原理也就是在不更改正常的业务处理流程的前提下,通过生成一个动态代理类,从而实现对目标对象嵌入附加的操作。在iOS中,要想实现相似的效果也很简单,利用OC的动态性,...

RainOrz
5分钟前
1
0
0006-Zookeeper指标分析

1. 问题描述 通过CDH管理平台,进入Zookeeper管理界面,Zookeeper的平均请求延迟、最小请求延迟、最大请求延迟指标趋势图维持不变,指标数据异常。 2.问题复现 登录CDH平台,进入Zookeeper管...

Hadoop实操
14分钟前
1
0
PAT(Basic Level) 乙级练习题 ------ 1047 编程团体赛 java

1047.编程团体赛 题目: 编程团体赛的规则为:每个参赛队由若干队员组成;所有队员独立比赛;参赛队的成绩为所有队员的成绩和;成绩最高的队获胜。 现给定所有队员的比赛成绩,请你编写程序找...

Carol998
18分钟前
1
0
抓包

1、下载 2、 tcpdump -i em1 host 目标域名 -n -X -s0 -w 写入文件名

HenryZhou2
19分钟前
1
0
axios 实现下载excel文件的说明~~~~遇到一个大坑,还是没有熟悉源码的罪过

本来下载文件直接用a标签,非常easy,但是如果数据量巨大的话,没有loading效果,用户体验非常差。优化项目的时候领导要求必须修改。因此只能用axios来下载了。 a标签下载: <a :href="dow...

YJ_
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部