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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP异常处理浅析
2015/05/12 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
react 生命周期实例分析
2020/05/18 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python中使用print输出中文的方法
2018/07/16 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
tensorboard显示空白的解决
2020/02/15 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
微博营销计划书
2014/01/10 职场文书
收银员岗位职责
2014/02/07 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
一年级小学生评语
2014/04/22 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
还款承诺书范文
2014/05/20 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
python编写五子棋游戏
2021/05/25 Python