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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
自己做矿石收音机
2021/03/02 无线电
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php curl的深入解析
2013/06/02 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
简单的php购物车代码
2020/06/05 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
详解Vite的新体验
2021/02/22 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
python 不关闭控制台的实现方法
2011/10/23 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python生成任意频率正弦波方式
2020/02/25 Python
django和flask哪个值得研究学习
2020/07/31 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
2014年内勤工作总结
2014/11/24 职场文书
鼋头渚导游词
2015/02/05 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
小学运动会开幕词
2016/03/04 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL