html5+实现plus.io进行拍照和图片等获取


Posted in HTML / CSS onJune 01, 2022

html5+官网地址

使用Hbuilder开发工具开发:实现可对Android机进行控制和获取资源
说明:IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象

获取目录:常量:

  • 应用私有资源目录,对应常量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()   //设备现在不支持,需要手动调用关闭摄像头
            },
//打开摄像头进行拍照
            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 ) {   //取消拍照的函数
                            console.log(error)
                        },
                        {resolution:res,format:fmt}
                    )
            },
//根据路径获取图片参数
            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
                        // 创建读取目录信息对象 
                        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+实现plus.io进行拍照和图片等获取的文章就介绍到这了,更多相关html5+拍照和图片获取内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 

Tags in this post...

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
基于CSS制作创意端午节专属加载特效
聊聊CSS粘性定位sticky案例解析
Jun 01 #HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
You might like
php adodb操作mysql数据库
2009/03/19 PHP
PHP的引用详解
2015/02/22 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JS正则匹配中文的方法示例
2017/01/06 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Openlayers实现测量功能
2020/09/25 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python温度转换实例分析
2018/01/17 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
高二生物教学反思
2014/01/27 职场文书
2015年药房工作总结
2015/04/25 职场文书
检讨书范文大全
2015/05/07 职场文书
道歉情书大全
2015/05/12 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers