这篇文章主要介绍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变形。失败!
以上是“HTML5如何实现微信拍摄上传照片功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。