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随鼠标移动而抖动起来
Feb 10 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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 Stream_*系列函数
2010/08/01 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
Javascript的比较汇总
2016/07/25 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python实现根据文件格式分类
2019/10/31 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
庆国庆活动总结
2014/08/28 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
史上最牛的辞职信
2015/02/28 职场文书