JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5实现微信拍摄上传照片功能大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

做了个微信的HTML5拍摄上传照片功能,问题重重...

前端代码

.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,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;

});

后端代码

); 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日 ---------------------------------------------

目前所有问题都解决了,在https://github.com/think2011/LocalResizeIMG">github上建立了插件,有需要的朋友可以去获取一下,顺便说一下,时间过的真快。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。

大佬总结

以上是大佬教程为你收集整理的HTML5实现微信拍摄上传照片功能全部内容,希望文章能够帮你解决HTML5实现微信拍摄上传照片功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。