做了个微信的 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。
微信 android 版本无法响应上传控件 input tyle=file;
--------------------------------------- 后续报告 3 2014 年 5 月 16 日 ---------------------------------------------
目前所有问题都解决了,在 github 上建立了插件,有需要的朋友可以去获取一下,顺便说一下,时间过的真快。
来源: http://www.jb51.net/article/111776.htm