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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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中目录,文件操作详谈
2007/03/19 PHP
php 面向对象的一个例子
2011/04/12 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP Session机制简介及用法
2014/08/19 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
js实现背景图自适应窗口大小
2017/01/10 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
vue检测对象和数组的变化分析
2018/06/30 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
如何基于线程池提升request模块效率
2020/04/18 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
C语言编程练习
2012/04/02 面试题
会计系毕业求职信
2014/08/07 职场文书
校园安全广播稿范文
2014/09/25 职场文书
作文批改评语
2014/12/25 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
锦旗赠语
2015/06/23 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android