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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 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
第五节--克隆
2006/11/16 PHP
PHP中cookies使用指南
2007/03/16 PHP
基于pear auth实现登录验证
2010/02/26 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python 实现让字典的value 成为列表
2019/12/16 Python
英国计算机商店:Technextday
2019/12/28 全球购物
补充协议书范本
2014/04/23 职场文书
大专学生求职自荐信
2014/07/06 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
红高粱观后感
2015/06/10 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
jquery插件实现代码雨特效
2021/04/24 jQuery
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Python基础之条件语句详解
2021/06/16 Python
php去除deprecated的实例方法
2021/11/17 PHP
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis