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 相关文章推荐
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
生产副总岗位职责
2013/11/28 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Python如何让字典保持有序排列
2022/04/29 Python