本文目錄一覽:
- 1、手機web頁面怎麼調用攝像頭執行掃描,獲取數據?
- 2、php微信拍照接口範例怎麼寫
- 3、用php實現手機拍照+本地相冊實現圖片上傳功能,需要統一樣式
- 4、有沒大神指點php在手機上怎麼調用攝像頭掃描二維碼
手機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);
}
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();
});
用php實現手機拍照+本地相冊實現圖片上傳功能,需要統一樣式
PHP?很遺憾,PHP無法啟動手機的拍照功能,這個需要調用手機的內部資源,通俗來說就是只有APP獲取了這個權限才能去打開拍照公告,PHP是無法辦到的。對於文件上傳,目前還真的只有 input type=”file”,至於樣式自己可以 去調試,關於你說的兼容性太差了,這個很不解,麻煩描述清楚點。
有沒大神指點php在手機上怎麼調用攝像頭掃描二維碼
PHP無法調用手機的攝像頭,因為沒權限。
而且PHP、NET、JSP這些對於手機來說都不過是HTML網頁而已
就算你有能力在手機上配置PHP的環境,也是無法調用攝像頭的。
但你不要灰色,我只是糾正一下你問問題的方式。
其實HTML5是可以調用手機的攝像頭的,下面直接上代碼
input type=”file” accept=”image/*” capture=”camera”
input type=”file” accept=”video/*” capture=”camcorder”
input type=”file” accept=”audio/*” capture=”microphone”
看清楚了,第一行是調用攝像頭,第二行估計也是,第三行是調用音樂播放器。如果非要和PHP扯上點關係那就這樣寫
?php echo ‘input type=”file” accept=”image/*” capture=”camera”
input type=”file” accept=”video/*” capture=”camcorder”
input type=”file” accept=”audio/*” capture=”microphone”‘ ;?
原創文章,作者:UVOA,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/143137.html