php實現拍照上傳,php接收圖片

本文目錄一覽：

• 1、用php實現手機拍照+本地相冊實現圖片上傳功能，需要統一樣式
• 2、如何使用HTML5實現利用攝像頭拍照上傳功能
• 3、php微信拍照介面範例

用php實現手機拍照+本地相冊實現圖片上傳功能，需要統一樣式

PHP？很遺憾，PHP無法啟動手機的拍照功能，這個需要調用手機的內部資源，通俗來說就是只有APP獲取了這個許可權才能去打開拍照公告，PHP是無法辦到的。對於文件上傳，目前還真的只有 input type=”file”，至於樣式自己可以 去調試，關於你說的兼容性太差了，這個很不解，麻煩描述清楚點。

如何使用HTML5實現利用攝像頭拍照上傳功能

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。

1、 視頻流

HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標籤，並將從攝像頭獲得的視頻作為這個標籤的輸入來源。

video id=」video」 autoplay=」”/video

script

var video_element=document.getElementById(『video』);

if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow

navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數

}

function success(stream){

video_element.src=stream;

}

/script

此時，video 標籤內將顯示動態的攝像視頻流。下面需要進行拍照了。

2、 拍照

拍照是採用HTML5的Canvas功能，實時捕獲Video標籤的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：

var canvas=document.createElement(『canvas』); //動態創建畫布對象

var ctx=canvas.getContext(』2d』);

var cw=vw,ch=vh;

ctx.fillStyle=」#ffffff」;

ctx.fillRect(0,0,cw,ch);

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪製到畫布上指定的區域，可進行不等大不等位的繪製。

document.body.append(canvas);

3、 圖片獲取

從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。

var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。

第一種：是在前端截取22位以後的字元串作為圖像數據，例如：

var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：

var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：

$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、 圖片上傳

在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：

$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。

function convert_data($data){

$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

save_to_file($image);

}

function save_to_file($image){

$fp=fopen($filename,』w’);

fwrite($fp,$image);

fclose($fp);

}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。

在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。

相關規範：

（為便於閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重複，並作了注釋）

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。

1、 視頻流

HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標籤，並將從攝像頭獲得的視頻作為這個標籤的輸入來源。

video id=」video」 autoplay=」”/video

script

var video_element=document.getElementById(『video』);

if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow

navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數

}

function success(stream){

video_element.src=stream;

}

/script

此時，video 標籤內將顯示動態的攝像視頻流。下面需要進行拍照了。

2、 拍照

拍照是採用HTML5的Canvas功能，實時捕獲Video標籤的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：

var canvas=document.createElement(『canvas』); //動態創建畫布對象

var ctx=canvas.getContext(』2d』);

var cw=vw,ch=vh;

ctx.fillStyle=」#ffffff」;

ctx.fillRect(0,0,cw,ch);

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪製到畫布上指定的區域，可進行不等大不等位的繪製。

document.body.append(canvas);

3、 圖片獲取

從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。

var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。

第一種：是在前端截取22位以後的字元串作為圖像數據，例如：

var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：

var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：

$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、 圖片上傳

在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：

$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。

function convert_data($data){

$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

save_to_file($image);

}

function save_to_file($image){

$fp=fopen($filename,』w’);

fwrite($fp,$image);

fclose($fp);

}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。

在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。

php微信拍照介面範例

    // 圖片介面

    //拍照、本地選圖

    var images = {

    localId: [],

    serverId: []

    };

    wx.chooseImage({

      success: function (res) {

        images.localId = res.localIds;

        alert(‘已選擇 ‘ + res.localIds.length + ‘ 張圖片’);

      }

    });

  //上傳圖片

  $(“#upload”).click(function(){

    if (images.localId.length == 0) {

      alert(‘請先使用 chooseImage 介面選擇圖片’);

      return;

    }

    var i = 0, length = images.localId.length;

    images.serverId = [];

    function upload() {

      wx.uploadImage({

        localId: images.localId[i],

        success: function (res) {

          i++;

          alert(‘已上傳：’ + i + ‘/’ + length);

          images.serverId.push(res.serverId);

          if (i  length) {

            upload();

          }

        },

        fail: function (res) {

          alert(JSON.stringify(res));

        }

      });

    }

    upload();

  });

  // 5.4 下載圖片

  $(“#download”).click(function(){

    if (images.serverId.length === 0) {

      alert(‘請先使用 uploadImage 上傳圖片’);

      return;

    }

    var i = 0, length = images.serverId.length;

    images.localId = [];

    function download() {

      wx.downloadImage({

        serverId: images.serverId[i],

        success: function (res) {

          i++;

          alert(‘已下載：’ + i + ‘/’ + length);

          images.localId.push(res.localId);

          if (i  length) {

            download();

          }

        }

      });

    }

    download();

  });