当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-02 04:06 编辑：来源：阅读：
扫一扫，手机访问

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

做了个微信的HTML5拍摄上传照片功能，问题重重... [b]前端代码[/b]

$(':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;

 });

[b]后端代码[/b]

$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

[b]实测：[/b] 电脑端 chrome 版本29，上传成功，源图片3M，压缩后1024 * 比例，约250kb [b]通过！[/b] 移动端 android 版本4+，微信，点击上传无反应，在手机浏览器中打开可上传，拍摄约3M-，压缩后1024* 比例，约3M-，根本没压缩嘛！！！ [b]失败！[/b] iphone4 & 4s 版本6+ 微信，拍摄约3M-，压缩后1024 * 比例，约250kb [b]通过！[/b] iphone5 版本6+ 微信，生成canvas变形。[b]失败！[/b] [b]总结：[/b]系统级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日 --------------------------------------------- 目前所有问题都解决了，在[url=https://github.com/think2011/LocalResizeIMG]github[/url]上建立了插件，有需要的朋友可以去获取一下，顺便说一下，时间过的真快。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：手机号码，密码正则验证
下一篇：JavaScript运行过程中的“预编译阶段”和“执行阶段”

资讯排行榜
更多>>