html5+實現(xiàn)plus.io進行拍照和圖片等獲取
發(fā)布時間:2022-05-31 16:49:03 作者:邵先森~
我要評論
本文主要介紹了html5+實現(xiàn)plus.io進行拍照和圖片等獲取,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
使用Hbuilder開發(fā)工具開發(fā):實現(xiàn)可對Android機進行控制和獲取資源
說明:IO模塊管理本地文件系統(tǒng),用于對文件系統(tǒng)的目錄瀏覽、文件的讀取、文件的寫入等操作。通過plus.io可獲取文件系統(tǒng)管理對象
獲取目錄:常量:
- 應(yīng)用私有資源目錄,對應(yīng)常量plus.io.PRIVATE_WWW,僅應(yīng)用自身可讀
- 應(yīng)用私有文檔目錄,對應(yīng)常量plus.io.PRIVATE_DOC,僅應(yīng)用自身可讀寫
- 應(yīng)用公共文檔目錄,對應(yīng)常量plus.io.PUBLIC_DOCUMENTS,多應(yīng)用時都可讀寫,常用于保存應(yīng)用間共享文件
- 應(yīng)用公共下載目錄,對應(yīng)常量plus.io.PUBLIC_DOWNLOADS,多應(yīng)用時都可讀寫,常用于保存下載文件
以下有四個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() //設(shè)備現(xiàn)在不支持,需要手動調(diào)用關(guā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)
// 應(yīng)用私有文檔目錄常量
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 );
} );
} );
}
到此這篇關(guān)于html5+實現(xiàn)plus.io進行拍照和圖片等獲取的文章就介紹到這了,更多相關(guān)html5+拍照和圖片獲取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于HTML5+ API plusready的兼容問題
這篇文章主要介紹了HTML5+ API plusready的兼容問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-20HTML5 Plus 實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了HTML5 Plus的Camera、GalleryIO、Storage和Uploader,實現(xiàn)手機APP拍照或相冊選擇圖片上傳功能的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-13

