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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python机器学习之神经网络(二)
2017/12/20 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
如何基于python实现不邻接植花
2020/05/01 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
Python基础之数据结构详解
2021/04/28 Python