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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jquery密码强度校验
2015/12/02 Javascript
jsTree使用记录实例
2016/12/01 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python随机数分布random均匀分布实例
2019/11/27 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
EJB的基本架构
2016/09/22 面试题
总结表彰大会主持词
2014/03/26 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2015年推普周活动总结
2015/03/27 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
实习证明格式范文
2015/06/16 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技