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教程:background-clip和background-origin
Oct 17 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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 goto语句简介和使用实例
2014/03/11 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php实现求相对时间函数
2015/06/15 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
办公室人员先进事迹
2014/01/27 职场文书
采购部经理岗位职责
2014/02/10 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Python实现单例模式的5种方法
2021/06/15 Python
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫