文档章节

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

think2011
 think2011
发布于 2013/09/12 10:32
字数 471
阅读 22677
收藏 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的, 方向不对是因为修复导致的,但总比出问题好吧,暂时没去找解决方案。
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
HTML5+Canvas手机拍摄,本地压缩上传图片 安卓微信浏览器无法调用摄像头

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

那年花开
2014/06/23
6.3K
2
H5拍照应用开发经历的那些坑儿

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

我是李达康
2015/03/31
0
0
使用pngquant工具对PNG格式图片进行压缩

很多网站都对上传图片的大小有限制。如开源中国的博客限制图片大小在200KB以内。但是图片的大小很容易超过200KB,这就需要让我们想办法压缩下图片的空间。 这几天我拍摄了很多花草树木主题的...

北风其凉
2016/07/17
460
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring IOC实现原理

1、BeanDefinition 对依赖翻转模式中管理对象依赖关系的数据抽象 实现依赖翻转功能的核心数据结构 依赖翻转功能都是围绕对BeanDefinition 处理完成的 有了这些BeanDefinition 基础数据结构,...

职业搬砖20年
19分钟前
1
0
Python判断变量的数据类型的两种方法

1、isinstance(变量名,类型) def varargsql(self, sql, *args): if isinstance(args, tuple): self.cursor.execute(sql, args) self.conn.commit() 2、通过与其他已......

fang_faye
20分钟前
1
0
xml 转义特殊字符

XML中共有5个特殊的字符,分别是:&<>“’。如果配置文件中的注入值包括这些特殊字符,就需要进行特别处理。有两种解决方法:其一,采用本例中的特殊标签,将包含特殊字符的字符串封装起来;...

inidcard
21分钟前
1
0
Mysql中哪些sql 不会走索引

1. 索引列参与了计算 SELECT `sname` FROM `stu` WHERE `age`+10=30; 2. 索引使用了函数运算 SELECT `sname` FROM `stu` WHERE LEFT(`date`,4) <1990; 3. like SELECT * FROM `houdunwang` W......

ChyiHuang
30分钟前
2
0
nginx 504 Gateway Time-out

打开nginx.config: 参数介绍: #设定http服务器http{include mime.types; #文件扩展名与文件类型映射表default_type application/octet-stream; #默认文件类型#charset utf-8; #默...

lyle_luo
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部