文档章节

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

think2011
 think2011
发布于 2013/09/12 10:32
字数 471
阅读 2.3W
收藏 27

行业解决方案、产品招募中!想赚钱就来传!>>>

  做了个微信的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

think2011

粉丝 23
博文 7
码字总数 3684
作品 1
广州
程序员
私信 提问
加载中
此博客有 55 条评论,请先登录后再查看。
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
5.6K
8
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
C/C++ 代码文档生成器--cldoc

cldoc 是一个使用 clang 实现的 C/C++ 代码文档生成器。 特点: 使用 clang 可靠解析大多数复杂的 C++ 项目 零配置 使用 markdown 做为文档格式 生成描述 API 的 XML 文档 使用简单格式用于文...

匿名
2013/02/14
1.4K
0
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP实现RabbitMQ消息队列

先安装PHP对应的RabbitMQ,这里用的是 php_amqp 不同的扩展实现方式会有细微的差异. php扩展地址: http://pecl.php.net/package/amqp 具体以官网为准 http://www.rabbitmq.com/getstarted.htm...

PHP圈子
21分钟前
16
0
pdd笔试题

拼多多提前批的笔试没有报名,但昨天听伙伴们说很难,所以一共4道题,挑了2道会的,自己编了一下。 #include<iostream>#include<vector>#include<algorithm>using namespace std;int ma...

osc_tylqml9v
21分钟前
0
0
拓扑排序算法

/** * 拓扑排序算法,拓扑都是有向无环图 * 使用场景:编译的时候,比如,springboot启动的时候要读取docker系统环境变量,还要读取各配置文件按照顺序 * 还有比如,a的包依赖...

osc_94gn551r
22分钟前
0
0
巨微代理MS1581蓝牙无线收发器

上海巨微MS1581包含8位单片机和低功耗、低成本的BLE收发器,内部集成了发射机、接收机、GFSK调制解调器和BLE基带处理。遵循BLE广播通道通信,具有成本低、体积小、控制方便等优点。巨微代理英...

英尚微电子
23分钟前
12
0
链接测试(内部)

1、长链 https://chelun.eclicks.cn/web/information?info_tid=156984 - 文章test http://cjjl-h5-test.chelun.com/2020/big/index.html - 以小博大test 2、scheme : 钱包 supercoach://myw......

osc_hwc3munb
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部