博客专区 > think2011的博客 > 博客详情
HTML5+Canvas手机拍摄,本地压缩上传图片,案例实测报告。
think2011 发表于4年前
HTML5+Canvas手机拍摄,本地压缩上传图片,案例实测报告。
  • 发表于 4年前
  • 阅读 22177
  • 收藏 28
  • 点赞 17
  • 评论 55

IBM Bluemix免费试用!>>>   

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


共有 人打赏支持
粉丝 24
博文 7
码字总数 3684
作品 1
评论 (55)
AikeraAutoman
请问这个javascript_jpeg_encoder的用法,求博主给出实例。
think2011

引用来自“AikeraAutoman”的评论

请问这个javascript_jpeg_encoder的用法,求博主给出实例。

http://ajaxian.com/archives/javascript-jpeg-encoding
在这里找到有使用教程
AikeraAutoman

引用来自“hzplay”的评论

引用来自“AikeraAutoman”的评论

请问这个javascript_jpeg_encoder的用法,求博主给出实例。

http://ajaxian.com/archives/javascript-jpeg-encoding
在这里找到有使用教程

谢谢你
AikeraAutoman

引用来自“hzplay”的评论

引用来自“AikeraAutoman”的评论

请问这个javascript_jpeg_encoder的用法,求博主给出实例。

http://ajaxian.com/archives/javascript-jpeg-encoding
在这里找到有使用教程

你好,http://www.bytestrom.eu 这个网站已经没有内容了
Dray
最后如何?
微信android版本无法响应上传控件 好像是微信官方的设定,现在还无法突破
ITKing80
你的代码里没有调用camera的代码,能否提供一下,谢谢。
另外,上传的问题可以参考stu.baidu.com,他们是用flash实现上传的,测试过,可行。
御风001
最近也遇到这个问题!研究了一上午的html5,发现context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)直接可以实现图片等比压缩,可以去看看W3School看下。
3kqing
请问, 能提供源码吗?
久依
学习了,谢谢楼主,您做的这个Demo是在手机端上传图片进进行压缩吗?
think2011

引用来自“久依”的评论

学习了,谢谢楼主,您做的这个Demo是在手机端上传图片进进行压缩吗?
已经更新了,在我的github上。
think2011

引用来自“DolphinBoy”的评论

请问, 能提供源码吗?
已经更新了,在我的github上。
zzq20101
感谢楼主分享

试了下,发现我手机不支持window.URL,用下面这个就正常使用了

var myURL = window.URL || window.webkitURL
think2011

引用来自“zzq20101”的评论

感谢楼主分享

试了下,发现我手机不支持window.URL,用下面这个就正常使用了

var myURL = window.URL || window.webkitURL
是的,没有做兼容。
tosunk
楼主我用小米三手机测试,发现手机自带的浏览器和微信都点击上传按钮没反应,是我的有问题么??
think2011

引用来自“tosunk”的评论

楼主我用小米三手机测试,发现手机自带的浏览器和微信都点击上传按钮没反应,是我的有问题么??
刚刚更新了,去github上重新下载试试吧!
tosunk

引用来自“tosunk”的评论

楼主我用小米三手机测试,发现手机自带的浏览器和微信都点击上传按钮没反应,是我的有问题么??

引用来自“think2011”的评论

刚刚更新了,去github上重新下载试试吧!
非常感谢楼主如此高效率的响应,我的小米上的系统自带的浏览器已经测试通过!!
tosunk
但是小米3上的微信访问这个页面上传图片依然没有反应。。。。。
think2011

引用来自“tosunk”的评论

但是小米3上的微信访问这个页面上传图片依然没有反应。。。。。
哦,那可能你的微信还是旧版本吧,我试过同事的小米2,微信已经能够响应上传了。
tosunk

引用来自“tosunk”的评论

但是小米3上的微信访问这个页面上传图片依然没有反应。。。。。

引用来自“think2011”的评论

哦,那可能你的微信还是旧版本吧,我试过同事的小米2,微信已经能够响应上传了。
大哥你太厉害了,我更新了一下微信版本,果然OK了,我能弱弱的问一下,老版本的微信为什么不行吗,有什么内在原因吗,我是小白,问题的太多了,不好意思啊
think2011

引用来自“tosunk”的评论

但是小米3上的微信访问这个页面上传图片依然没有反应。。。。。

引用来自“think2011”的评论

哦,那可能你的微信还是旧版本吧,我试过同事的小米2,微信已经能够响应上传了。

引用来自“tosunk”的评论

大哥你太厉害了,我更新了一下微信版本,果然OK了,我能弱弱的问一下,老版本的微信为什么不行吗,有什么内在原因吗,我是小白,问题的太多了,不好意思啊
老版本的微信本身就有问题,新版本他们修复好了。
×
think2011
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: