html5+實現(xiàn)plus.io進行拍照和圖片等獲取
發(fā)布時間:2022-05-31 16:49:03 作者:邵先森~
我要評論

本文主要介紹了html5+實現(xiàn)plus.io進行拍照和圖片等獲取,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
使用Hbuilder開發(fā)工具開發(fā):實現(xiàn)可對Android機進行控制和獲取資源
說明:IO模塊管理本地文件系統(tǒng),用于對文件系統(tǒng)的目錄瀏覽、文件的讀取、文件的寫入等操作。通過plus.io可獲取文件系統(tǒng)管理對象
獲取目錄:常量:
- 應用私有資源目錄,對應常量plus.io.PRIVATE_WWW,僅應用自身可讀
- 應用私有文檔目錄,對應常量plus.io.PRIVATE_DOC,僅應用自身可讀寫
- 應用公共文檔目錄,對應常量plus.io.PUBLIC_DOCUMENTS,多應用時都可讀寫,常用于保存應用間共享文件
- 應用公共下載目錄,對應常量plus.io.PUBLIC_DOWNLOADS,多應用時都可讀寫,常用于保存下載文件
以下有四個demo
<button @click.stop="videoCapture" class="delBtn">錄像</button> <button @click.stop="captureImage" class="delBtn">拍照</button> <button @click.stop="getImage" class="delBtn">獲取圖片</button> <button @click.stop="getImageUrl" class="delBtn">獲取圖片目錄</button>
//打開攝像頭進行錄像 videoCapture(){ this.cmr = plus.camera.getCamera(); var res = this.cmr.supportedVideoResolutions[0]; var fmt = this.cmr.supportedVideoFormats[0]; console.log("Resolution: "+res+", Format: "+fmt); this.cmr.startVideoCapture( function( path ){ alert( "Capture video success: " + path ); }, function( error ) { alert( "Capture video failed: " + error.message ); }, {resolution:res,format:fmt} ); // 拍攝10s后自動完成 setTimeout( this.stopCapture, 10000 ); },
//停止攝像頭錄像 stopCapture(){ console.log("stopCapture"); this.cmr.stopVideoCapture() //設備現(xiàn)在不支持,需要手動調用關閉攝像頭 },
//打開攝像頭進行拍照 captureImage(){ var cmr = plus.camera.getCamera(); var res = cmr.supportedImageResolutions[0]; var fmt = cmr.supportedImageFormats[0]; console.log("Resolution: "+res+", Format: "+fmt); cmr.captureImage( function( path ){ //path 拍照成功獲取到路徑 console.log(path) }, function( error ) { //取消拍照的函數(shù) console.log(error) }, {resolution:res,format:fmt} ) },
//根據(jù)路徑獲取圖片參數(shù) getImage(){ plus.io.getImageInfo({ src: "/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/1652421993337.jpg", success: function(data){ console.log(JSON.stringify(data)); }, fail: function(err){ console.log(JSON.stringify(err)); } }) },
//獲取根目錄找到圖片 getImageUrl(){ console.log(this) let that = this console.log(that) // 應用私有文檔目錄常量 plus.io.requestFileSystem( plus.io.PRIVATE_DOC , function(fs){ // fs.root是根目錄操作對象DirectoryEntry // 創(chuàng)建讀取目錄信息對象 var directoryReader = fs.root.createReader(); console.log(directoryReader) directoryReader.readEntries( function( entries ){ console.log( entries.length) var reg = /.(png|jpg|gif|jpeg|webp)$/; entries.forEach( item =>{ console.log(item.name) if(reg.test(item.name)) { console.log(item.name) console.log(that.imageList) let name = '/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/'+item.name that.imageList.push(name) console.log(that.imageList) } }) console.log(that.imageList) }, function ( e ) { alert( "Read entries failed: " + e.message ); } ); } ); }
到此這篇關于html5+實現(xiàn)plus.io進行拍照和圖片等獲取的文章就介紹到這了,更多相關html5+拍照和圖片獲取內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
- 這篇文章主要介紹了HTML5+ API plusready的兼容問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-20
HTML5 Plus 實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能
這篇文章主要為大家詳細介紹了HTML5 Plus的Camera、GalleryIO、Storage和Uploader,實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能的相關資料,感興趣的小伙伴們可以參考一下2016-07-13