HTML5+Canvas手机拍摄，本地压缩上传图片

最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过N久的折腾，找到一个插件，用法如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<!DOCTYPE HTML> <html lang="zh-CN"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />  <head>     <meta charset="UTF-8">     <title>LocalResizeIMG</title> </head> <style>     body {         margin: 20px 20%;         color:#777;         text-align: center;     } </style> <body>     <h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>     <hr/>     <input type="file" />     <hr/>       <!-- javascript         ================================================== -->     <script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>     <script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>           <!-- mobileBUGFix.js 兼容修复移动设备 -->     <script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>     <script type="text/javascript">         $('input:file').localResizeIMG({              width: 500,              quality: 0.8,              success: function (result) {                  var img = new Image();                  img.src = result.base64;                        $('body').append(img);                  //console.log(result);                 $.ajax({                      url: './uploads.php',                      type: 'POST',                      data:{formFile:result.clearBase64},                      dataType: 'HTML',                      timeout: 1000,                      error: function(){                          alert('Error loading PHP document');                     },                      success: function(result){                          //console.log(result);                         alert("Uploads success~")                     }                  });              }          });     </script> </body> </html>

PHP代码：

1 2 3 4 5 6

<?php     $base64 = $_POST['formFile'];     $IMG = base64_decode($base64);     $path = './';     file_put_contents($path.time().'.jpg',$IMG); ?>

在前端把图片压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在PHP解开Base64，写入到一个文件去。

原插件地址：http://github.com/think2011/LocalResizeIMG

然后发现我朋友也写有一篇这个插件的使用的文章，地址在这里：http://a3147972.blog.51cto.com/2366547/1551066

最后，欢迎加Q群： 252799167

2015年04月11日12:23:10 Update：

这插件的作者已经对插件进行了升级，推荐使用新的插件：https://github.com/think2011/localResizeIMG3/

其他链接：

http://blog.csdn.net/renfufei/article/details/9836317

http://www.thinksaas.cn/group/topic/351088/