HTML5实现微信拍摄上传照片功能_甘肃明星软件开发有限公司

HTML5实现微信拍摄上传照片功能

未知脚本之家 2017-04-27 1422

这篇文章主要介绍了HTML5实现微信拍摄上传照片功能，实现HTML5 Canvas手机拍摄，本地压缩上传图片时遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

做了个微信的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上建立了插件，有需要的朋友可以去获取一下，顺便说一下，时间过的真快。

以上就是本文的全部内容，希望对大家的学习有所帮助。

分享到：

[返回顶部] [关闭窗口]

上一篇：JS使用cookie实现只出现一次的广告代码效果

下一篇：四家企业资金管理案例分析

HTML5实现微信拍摄上传照片功能

热门文章

随机文章