1. 程式人生 > >ionic調用相機

ionic調用相機

poe ngs details upd CA 註意 span color 照相

1-  首先至少要配置好ionic和cordova環境

  這裏提供一下Cordova的安裝命令:npm install -g cordova ionic 更新是update

  ionic start myApp blank --type=ionic1
    上面一句最後一個參數blank就是你要新建的項目的類型,還可以用sidemenu, tabs這些參數指定一個空白項目的類型。
    --type=ionic1制定項目版本

技術分享圖片

  這個命令可能百分之八十跑不起來 可以自己在git上面存個常用的

2-  cd到你的項目

   下載【cordova-angular】整合包ng_cordova.js,引入到項目中
   說明:ng_cordova.js是ionic研發的,他把cordova封裝成了一個angular模塊,方便我們在自己的項目中註入該模塊就可以調用操作各種底層封裝好的服務了
   官網:http://www.ionic-china.com/doc/ngCordova/
   下載:也可用bower下載 如果沒安裝bower 提供一下命令:npm install -g bower

技術分享圖片

3-  將js引入頁面,此js封裝的是一個angular的一個模塊,我們將它註入到自己的項目裏

技術分享圖片

技術分享圖片

我們在項目裏創建一個測試模塊。(註意,我少創建了一個id為myImage的圖片標簽,請寫一個放到button上邊就行,我就不重新截圖了)

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

https://blog.csdn.net/sourcecode_poet/article/details/53509911

至此,coding才算完事,然而因為Cordova是利用原生app語法調用的底層設備(ionic借助於Cordova來實現與底層來交互的),而Cordova封裝每個底層功能都是一個包,所以初始化項目的時候,官網沒有給你下載這些包,因為太多了。那麽咱們就需要手動下載,用哪個,下載那個。這裏我用的是攝像機的,就下載Cordova的照相機包。下載完之後,項目會多出一個plugins目錄,裏邊就有我們需要的那個插件‘cordova-plugin-camera’
cordova plugin add cordova-plugin-camera

技術分享圖片

打包,安裝,測試

本文完全摘自 會飛的魚lala:http://www.cnblogs.com/flyings/p/7474811.html

技術分享圖片

結尾附一張大神給我講的原理圖233

技術分享圖片

ionic調用相機