2. 程式人生 > >轉載了一個呼叫攝像頭拍照的cordova案例

轉載了一個呼叫攝像頭拍照的cordova案例

阿新 • • 發佈：2019-01-24
“ camera物件提供對裝置預設攝像頭應用程式的訪問。
方法：
  • camera.getpicture

引數：
  • camerasuccess
  • cameraerror
  • cameraoptions
camera.getpicture


選擇使用攝像頭拍照，或從裝置相簿中獲取一張照片。圖片以base64編碼的字串或圖片uri形式返回。

簡單的範例：
  1. navigator.camera.getpicture( camerasuccess, cameraerror, [ cameraoptions ] );  
複製程式碼
說明：
camera.getpicture函式開啟裝置的預設攝像頭應用程式
，使使用者可以拍照（如果 camera.sourcetype 設定為 camera.picturesourcetype.camera，這也是預設值）。一旦拍照結束，攝像頭應用程式會關閉並恢復使用者應用程式。
如果camera.sourcetype = camera.picturesourcetype.photolibrary或camera.picturesourcetype.savedphotoalbum，系統彈出照片選擇對話方塊，使用者可以從相集中選擇照片。
返回值會按照使用者通過cameraoptions引數所設定的下列格式之一發送給camerasuccess回撥函式：
  • 一個字串，包含base64編碼的照片影象（預設情況）。
  • 一個字串，表示在本地儲存的影象檔案位置。
你可以對編碼的圖片或uri做任何處理，例如：
  • 通過標籤渲染圖片（參看後續範例）
  • 儲存為本地資料（localstorage，lawnchair*等）
  • 將資料傳送到遠端伺服器
備註：較新的裝置上 使用攝像頭拍攝的照片的質量是相當不錯的，使用base64對這些照片進行編碼已導致其中的一些裝置出現記憶體問題 （如iphone4、blackberry torch 9800）。因此，強烈建議將“camera.destinationtype”設為file_uri。

支援的平臺：
  • android
  • blackberry webworks (os 5.0或更高版本)
  • ios

簡單的範例：
拍照並獲取base64編碼的影象：
  1.     navigator.camera.getpicture(onsuccess, onfail, { quality: 50 });  
  2.     function onsuccess(imagedata) {  
  3.        var image = document.getelementbyid('myimage');  
  4.        image.src = "data:image/jpeg;base64," + imagedata;  
  5.     }  
  6.     function onfail(message) {  
  7.        alert('failed because: ' + message);  
  8.     }  
複製程式碼 拍照並獲取影象檔案路徑：
  1.     navigator.camera.getpicture(onsuccess, onfail, { quality: 50,  
  2.                     destinationtype: camera.destinationtype.file_uri });  
  3.     function onsuccess(imageuri) {  
  4.         var image = document.getelementbyid('myimage');  
  5.         image.src = imageuri;  
  6.     }  
  7.     function onfail(message) {  
  8.         alert('failed because: ' + message);  
  9.     }  
複製程式碼 完整的範例：
  1.     <!doctype html>  
  2.     <html>  
  3.     <head>  
  4.     <title>capture photo</title>  
  5.     <script type="text/javascript" charset="utf-8" src="phonegap.js "></script>  
  6.     <script type="text/javascript" charset="utf-8">  
  7.         var picturesource;      //圖片來源  
  8.         var destinationtype;        //設定返回值的格式  
  9.         // 等待phonegap連線裝置  
  10.         document.addeventlistener("deviceready",ondeviceready,false);  
  11.         // phonegap準備就緒，可以使用！  
  12.         function ondeviceready() {  
  13.             picturesource=navigator.camera.picturesourcetype;  
  14.             destinationtype=navigator.camera.destinationtype;  
  15.         }  
  16.         // 當成功獲得一張照片的base64編碼資料後被呼叫  
  17.         function onphotodatasuccess(imagedata) {  
  18.             // 取消註釋以檢視base64編碼的影象資料  
  19.             // console.log(imagedata);  
  20.             // 獲取影象控制代碼  
  21.             var smallimage = document.getelementbyid('smallimage');  
  22.             // 取消隱藏的影象元素  
  23.             smallimage.style.display = 'block';  
  24.             // 顯示拍攝的照片  
  25.             // 使用內嵌css規則來縮放圖片  
  26.             smallimage.src = "data:image/jpeg;base64," + imagedata;  
  27.         }  
  28.        // 當成功得到一張照片的uri後被呼叫  
  29.        function onphotourisuccess(imageuri) {  
  30.             // 取消註釋以檢視圖片檔案的uri  
  31.             // console.log(imageuri);  
  32.             // 獲取圖片控制代碼  
  33.             var largeimage = document.getelementbyid('largeimage');  
  34.             // 取消隱藏的影象元素  
  35.             largeimage.style.display = 'block';  
  36.             // 顯示拍攝的照片  
  37.             // 使用內嵌css規則來縮放圖片  
  38.             largeimage.src = imageuri;  
  39.         }  
  40.        // “capture photo”按鈕點選事件觸發函式  
  41.        function capturephoto() {  
  42.             // 使用裝置上的攝像頭拍照，並獲得base64編碼字串格式的影象  
  43.             navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 50 });  
  44.        }  
  45.        // “capture editable photo”按鈕點選事件觸發函式  
  46.        function capturephotoedit() {  
  47.             // 使用裝置上的攝像頭拍照，並獲得base64編碼字串格式的可編輯影象  
  48.             navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 20, allowedit: true });  
  49.        }  
  50.        //“from photo library”/“from photo album”按鈕點選事件觸發函式  
  51.        function getphoto(source) {  
  52.             // 從設定的來源處獲取影象檔案uri  
  53.             navigator.camera.getpicture(onphotourisuccess, onfail, { quality: 50,  
  54.             destinationtype: destinationtype.file_uri,sourcetype: source });  
  55.        }  
  56.        // 當有錯誤發生時觸發此函式  
  57.        function onfail(mesage) {  
  58.             alert('failed because: ' + message);  
  59.        }  
  60.     </script>  
  61.     </head>  
  62.     <body>  
  63.         <button onclick="capturephoto();">capture photo</button> <br>  
  64.         <button onclick="capturephotoedit();">capture editable photo</button> <br>  
  65.         <button onclick="getphoto(picturesource.photolibrary);">from photo library</button><br>  
  66.         <button onclick="getphoto(picturesource.savedphotoalbum);">from photo album</button><br>  
  67.         <img style="display:none;width:60px;height:60px;" id="smallimage" src="" />  
  68.         <img style="display:none;" id="largeimage" src="" />  
  69.         </body>  
  70.     </html>  
複製程式碼
camerasuccess
提供影象資料的onsuccess回撥函式。
  1.     function(imagedata) {  
  2.        // 對影象進行處理  
  3.     }  
複製程式碼 引數：
  • imagedata：根據cameraoptions的設定值，為base64編碼的影象資料或影象檔案的uri。（字串型別）

範例：
  1.     // 顯示圖片  
  2.     function cameracallback(imagedata) {  
  3.         var image = document.getelementbyid('myimage');  
  4.         image.src = "data:image/jpeg;base64," + imagedata;  
  5.     }  
複製程式碼
cameraerror
提供錯誤資訊的onerror回撥函式。
  1.     function(message) {  
  2.        // 顯示有用資訊  
  3.     }  
複製程式碼 引數：
  • message：裝置本 地程式碼提供的錯誤資訊。（字串型別）
cameraoptions


定製攝像頭設定的可選引數。
  1.     {   quality : 75,  
  2.         destinationtype : camera.destinationtype.data_url,  
  3.         sourcetype : camera.picturesourcetype.camera,  
  4.         allowedit : true,  
  5.         encodingtype : camera.encodingtype.jpeg,  
  6.         targetwidth : 100,  
  7.         targetheight : 100};  
複製程式碼 選項：
  • quality：儲存影象的質量，範圍是[0,100]。（數字型別）
  • destinationtype：選擇返回資料的格式。通過navigator.camera.destinationtype進行定義。（數字型別）
  1.     camera.destinationtype = {  
  2.         data_url : 0,   //返回base64編碼字串的影象資料  
  3.         file_uri : 1    //返回影象檔案的uri  
  4.     }  
複製程式碼
  • sourcetype：設定圖片來源。通過nagivator.camera.picturesourcetype進行定義。（數字型別）
  1.     camera.picturesourcetype = {  
  2.         photolibrary : 0,  
  3.         camera : 1,  
  4.         savedphotoalbum : 2  
  5.     }  
複製程式碼
  • allowedit：在選擇圖片進行操作之前允許對其進行簡單編輯。（布林型別）
  • encodingtype：選擇返回影象檔案的編碼方式，通過navigator.camera.encodingtype進行定義。（數字型別）
  1.     camera.encodingtype = {  
  2.         jpeg : 0,       // 返回jpeg格式圖片  
  3.         png : 1         // 返回png格式圖片  
  4.     };  
複製程式碼
  • targetwidth：以畫素為單位的影象縮放寬度，必須和targetheight同時使用。相應的寬高比保持不變。（數字型別）
  • targetheight：以畫素為單位的影象縮放高度，必須和targetwidth同時使用。相應的寬高比保持不變。（數字型別）
android的特異情況：
  • 忽略allowedit引數。
  • camera.picturesourcetype.photolibrary 或 camera.picturesourcetype.savedphotoalbum 都會顯示同一個相集。
  • camera.encodingtype不被支援。

blackberry的特異情況：
  • 忽略quality引數。
  • 忽略sourcetype引數。
  • 忽略allowedit引數。
  • 當拍照結束後，應用程式必須有按鍵注入許可權才能關閉本地camera應用程式。
  • 使用大影象尺寸，可能會導致新近帶有高解析度攝像頭的型號裝置無法對影象進行編碼（如：torch 9800）。

palm的特異情況：
  • 忽略quality引數。
  • 忽略sourcetype引數。
  • 忽略allowedit引數。

iphone的特異情況：
  • 為了避免部分裝置上出現記憶體錯誤，quality的設定值要低於50。
  • 當使用destinationtype.file_uri時，使用攝像頭拍攝的和編輯過的照片會儲存到應用程式的documents/tmp目錄。
  • <span javascript"="" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background: transparent; max-width: 650px; height: auto;">var url = window.location.href;document.write("此文連結："+url+" ");document.write("轉載請註明出處："+document.title+"");

相關推薦

轉載了一個呼叫攝像頭拍照的cordova案例

“ camera物件提供對裝置預設攝像頭應用程式的訪問。 方法： camera.getpicture 引數： camerasuccess cameraerror cameraoptions camera.getpicture 選擇使用攝像頭拍照，或從裝置相簿中獲取一張照片。圖片以base64編碼

unity呼叫攝像頭拍照

 我的unity呼叫攝像頭拍照 因為做的是pc端的，所以不知道手機上效果是怎樣的，據說程式碼是完全相同的。 廢話不說，上程式碼， 開啟攝像頭程式碼： /// <summary> /// Opens the camera /// </summary&g

js呼叫攝像頭拍照,js呼叫攝像頭線上拍照,js呼叫電腦攝像頭拍照

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人臉採集</title> <script src="jque

Android中呼叫攝像頭拍照儲存，並在相簿中選擇圖片顯示

我的配置是： android手機版本是7.0 android studio是3.1 android平臺是9.0 我的測試都是在真機上進行的。 首先來看程式碼： package com.example.sunshunli.cameraalbumtest; import a

js 呼叫攝像頭拍照

          本文主要介紹，js+canvas+video ，呼叫本地攝像頭，實現拍照效果，程式碼如下，供大家參考學習   <!doctype html> <html lang="en"> <he

使用js呼叫攝像頭拍照

使用js呼叫攝像頭拍照 在一些瀏覽器裡已經可以使用web api呼叫攝像頭功能了。 基於此可以經行拍照攝像功能，網上找了些資料，然後實現了簡單的拍照功能 演示地址 bingxl.cn/webrtc.html 程式碼 <!

Android開發之呼叫攝像頭拍照

現在很多應用中都會要求使用者上傳一張圖片來作為頭像，首先我在這接收使用相機拍照和在相簿中選擇圖片。接下來先上效果圖： 接下來看程式碼： 1，佈局檔案： <?xml version="1.0" encoding="utf-8"?> <

h5呼叫攝像頭+拍照+上傳圖片-----h5+js+ajax

敬請關注部落格，後期不斷更新優質博文，謝謝 專案中需要用到呼叫攝像頭拍照並上傳照片到後臺，特此記錄：如有不足，望廣大同行們批評指出。 1，前端頁面 visitor/touch/touchIndex/list.jsp:前端頁面 <!-- ************

html5中呼叫攝像頭拍照

方法： getCamera: 獲取攝像頭管理物件 物件： Camera: 攝像頭物件 CameraOption: JSON物件，呼叫攝像頭的引數 PopPosition: JSON物件，彈出拍照或攝像介面指示位置

HTML5+JavaScript呼叫攝像頭拍照或者攝像

呼叫攝像頭拍照或者攝像有多種方法，之前介紹過兩種：現在我們來看一下第三種方法：用HTML5和javascript來做，瀏覽器支援IE9+。佈局很簡單，就是設定一個"拍照"按鈕的監聽器，呼叫攝像頭video，然後顯示出來畫像（需要使用者許可權）。首先，要允許網頁寬度自動調整，我

android studio呼叫攝像頭拍照及具體步驟演示程式碼

演示程式碼的功能，呼叫攝像頭拍照，成功的話則把照片顯示出來。 第一步 定義一個按鈕用於呼叫攝像頭拍照，ImageView用於存放顯示拍出的照片。 <Button android:id="@+id/take_photo" android

Aforge.net類庫呼叫攝像頭拍照(C#)

官網下載library 新增引用： AForge.Imaging ——影象處理和過濾器 AForge.Video ——視訊處理類庫 AForge.Controls—— 影象顯示控制元件 工具箱新增aforge的元件： 新增元件： 先載入列出來所有可用攝像頭放到

Qt5.5 呼叫攝像頭拍照

在網上找了攝像頭拍照的demo，自己敲了一遍，並加了註釋，僅作為學習記錄。 標頭檔案： #ifndef TEST_CAPTURE_H #define TEST_CAPTURE_H #include <QDialog> #include <QCamera

android呼叫攝像頭拍照並顯示

1. 得到一個button並新增事件，先建立一個檔案，然後用Intent通過 “android.media.action.IMAGE_CAPTURE”，呼叫攝像頭。 File outputImage = new File(Environment.getExternalSto

呼叫攝像頭和相簿（呼叫攝像頭拍照和從相簿中選擇圖片）

public class MainActivity extends Activity { public static final int TAKE_PHOTO=1; public static final int CROP_PHOTO=0; public static

【轉載】一個c程序在執行main函數之前和main之後都做了那些事情

loss -- text ould 很多 int win 部分 不知道 轉自：https://bbs.csdn.net/topics/300103318#r_78088969 main函數之前--真正的函數執行入口或開始一種解釋實際上，在可執行文件被加載之後，控制權立即交給

憑什麼說AMQP比JMS優秀啊？JMS才是真正實現了一個客戶端呼叫多種產品的訊息中介軟體啊

一、AMQP 歷史​ 訊息佇列（Message Queue）起源於一位來自 MIT 的硬體設計教育工作者 Vivek Ranadivé 設想了一種通用軟體匯流排，就像主機板上的匯流排那樣，供其他應用程式接入。Vivek在1983年成立了 Teknekron，高盛等公司作為第一批使用者再金融交易中採用了 Tek

【轉】一個普通車民對比亞迪的評價——感覺比亞迪這兩年進步還可以，果斷轉載了

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Orchard Core 增加了一個API模組，要怎麼呼叫

如下，我在Orchard Core框架中添加了一個API的模組，並且定義了對應的許可權才可以呼叫，那麼我們現在考慮的就是要怎麼去呼叫它。 首先，我們用Fiddler檢視下我們正常的登入的http報文，直接在瀏覽器輸入路徑例如： http://192.168.0.225:8082/admin ，會直接跳轉

實習了一個多月！師傅終於教我案例了！分散式爬蟲！這是我的筆記

  要抓微博資料，第一步便是模擬登陸，因為很多資訊（比如使用者資訊，使用者主頁微博資料翻頁等各種翻頁）都需要在登入狀態下才能檢視 這裡我簡單說一下，做爬蟲的同學不要老想著用什麼機器學習的方法去識別複雜驗證碼，真的難度非常大，這應該也不是一個爬蟲工程師的工作重點，當然這只是我的