HTML5+Canvas手機拍攝,本地壓縮上傳圖片

來源:互聯網
上載者:User

標籤:

最近在折騰移動站的開發,涉及到了一個手機裡面上傳圖片。於是經過N久的折騰,找到一個外掛程式,用法如下:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 <!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代碼:

123456 <?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/

HTML5+Canvas手機拍攝,本地壓縮上傳圖片

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.