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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 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
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php多文件上传下载示例分享
2014/02/20 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Open and Print a Word Document
2007/06/15 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python通过文本和图片生成词云图
2020/05/21 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
调查研究项目计划书
2014/04/29 职场文书
代办出身证明书
2014/10/21 职场文书
2014年党务工作总结
2014/11/25 职场文书
贫困证明怎么写
2015/06/16 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL