【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来
官网中有描述camera组件功能界面属性介绍,但是官网没有具体的demo让我们感受拍照的功能,今天写一篇demo来完善一下拍照的功能
demo 功能如下
第一步首先进行拍照功能
第二步 进行js页面跳转功能
第三步 使用image 显示拍照的照片
第一步首先进行拍照功能
参考链接如下
1.1 html 代码
<div class="container">
<camera id='camera-id' flash="on" deviceposition="back" @error="cameraError">
</camera>
<text class="textTakePhoto" on:click="takePhoto" > 拍照</text>
</div>
1.2 css 代码
···
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
camera {
width: 100%;
height: 80%;
}
.textTakePhoto{
padding: 10px;
border-width: 2vp;
border-color: black;
border-bottom-style: solid;
border-radius: 90vp;
margin-top: 40px;
text-color: black;
font-family: sans-serif;
font-size: 25px;
}
1.3 js 代码
···
export default {
data: {
title: 'World',
src:""
},
cameraError(){
},
takePhoto(){
var _this=this;
console.log('------------------------------>takePhoto')
var camera = this.$element('camera-id')
camera.takePhoto({
quality:'high',
success(result){
_this. src=result.uri
console.log("拍照成功路径==>>"+_this.src);
//
},
fail(result){
console.info('-------------fail------'+result)
},
complete(result){
// console.info('-------------complete------'+result)
}
})
},
}
1.4 运行效果
第二步 进行js页面跳转功能
我们可以在拍照中完成(complete)的时候进行跳转另外一个界面,然后对图片路径做出相应的处理
参考资料如下
2.1代码如下
complete(result){
console.info('-------------complete------'+result)
var appsrc="file:///data/data/com.harmony.alliance.jsdemo/files/"
var path="internal://app/"+_this.src.substring(appsrc.length,_this.src.length)
console.info('-------------success------'+path )
router.push({
uri: "pages/myImage/myImage",
params: {
src: path
},
})
}
第三步 使用image 显示拍照的照片
3.1 参考资料如下
3.2怎么显示本地图片
Image组件存在一个src假设为internal://app/1.png
其真实路径是file:///data/data/包名 /files/1.png
3.3 hml代码
<div class="container">
<text>{{src}}</text>
<image src="{{src}}" style="width: 300px; height: 300px;">
</image>
</div>
CSS代码
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
width: 200px;
height: 100px;
}
Js 代码
export default {
data: {
title: 'World',
src:""
}
}
3.4 运行效果
==
更多精彩内容,请见华为开发者官方论坛→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang
【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来的更多相关文章
- 从微信小程序到鸿蒙js开发【04】——list组件
目录: 1.可滚动区域 2.list + list-item 3.list + list-item-group + list-item 1.可滚动区域 在许多场景中,页面会有一块区域是可滚动的,比如这 ...
- 从微信小程序到鸿蒙js开发【06】——swiper&animator&marquee
目录: 1.swiper轮播图 2.image-animator幻灯片 3.marquee跑马灯 4.nginx动静分离 1.swiper轮播图 微信小程序的swiper组件中只能放置swiper-i ...
- 从微信小程序到鸿蒙js开发【08】——表单组件&注册登录模块
目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button ...
- 从微信小程序到鸿蒙js开发【11】——页面路由
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
- 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...
- 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...
- 鸿蒙js开发7 鸿蒙分组列表和弹出menu菜单
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口]目录:1.鸿蒙视图效果2.js业务数据和事件3.页面视图代码4.跳转页面后的视图层5.js业务逻辑部分6.<鸿蒙js开发& ...
- 从微信小程序到鸿蒙js开发【15】——JS调用Java
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...
- 鸿蒙JS 开发整理
目录 一.前言: 二.鸿蒙 JS UI框架 2.1 JS UI特性 2.2 架构 2.3 新的UI框架结构 三.API 四.最后 一.前言: 5月25日,华为对外宣布计划在6月2日正式举办鸿蒙手机发布 ...
随机推荐
- ACwing1216. 饮料换购
题目: 乐羊羊饮料厂正在举办一次促销优惠活动.乐羊羊C型饮料,凭3个瓶盖可以再换一瓶C型饮料,并且可以一直循环下去(但不允许暂借或赊账). 请你计算一下,如果小明不浪费瓶盖,尽量地参加活动,那么,对于 ...
- JAVA获取请求的IP地址
private static final String[] ADDR_HEADER = { "X-Forwarded-For", "Proxy-Client-IP&quo ...
- cmake全面教程
1. 官网教程 2. 中文教程 3. Modern CMake
- c++之元组std::tuple常见用法
元组,c++11中引入的新的类型,可类比std::pair. 但是std::pair只能支持两个元素. 理论上, 元组支持0~任意个元素. 本文演示环境: VS2015 up3 0.头文件 #incl ...
- 【LeetCode】12. Integer to Roman 整数转罗马数字
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:roman, 罗马数字,题解,leetcode, 力扣, ...
- 1046:Square Number
总时间限制: 1000ms 内存限制: 65536kB 描述 给定正整数b,求最大的整数a,满足a*(a+b) 为完全平方数 输入 多组数据,第一行T,表示数据数.对于每组数据,一行一个正整数表示b. ...
- 1170 - Counting Perfect BST
1170 - Counting Perfect BST PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 3 ...
- SOFA 通信
私有通信协议设计: 我们的分布式架构,所需要的内部通信模块,采用了私有协议来设计和研发. 可以有效地利用协议里的各个字段 灵活满足各种通信功能需求:比如 CRC 校验,Server Fail-Fast ...
- DEFENSE-GAN: PROTECTING CLASSIFIERS AGAINST ADVERSARIAL ATTACKS USING GENERATIVE MODELS
目录 概 主要内容 Samangouei P, Kabkab M, Chellappa R, et al. Defense-GAN: Protecting Classifiers Against Ad ...
- Electron 使用 Tray设置图标的路径问题
问题报错信息如图 上面的代码在dev模式下不报错,但是在build后,安装后,运行会提示错误,错误信息的大意是参数错误,原因应该是安装后的图片文件路径有问题,这块没有详细研究解决上面的问题的方法,是使 ...