iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现拍照功能
  • 1127
分享到

微信小程序实现拍照功能

2024-04-02 19:04:59 1127人浏览 八月长安
摘要

小程序实现一个拍照功能,亲测可用。 页面的样式都是我自己写的,当然你们也可以自己排版写样式。下面一共有三个按钮,返回按钮、拍照按钮、切换摄像头按钮。 首先相机页面是通过wx:if来

小程序实现一个拍照功能,亲测可用。

页面的样式都是我自己写的,当然你们也可以自己排版写样式。下面一共有三个按钮,返回按钮、拍照按钮、切换摄像头按钮。

首先相机页面是通过wx:if来让其隐藏的,通过点击我们页面的拍照按钮来使条件为true,从而让我们的相机页面显示出来。然后我这里写了三个按钮,一个是返回按钮,一个是点击快门拍照的按钮,一个是摄像头的前置摄像头和后置摄像头的转换按钮。 

index.wxml

<camera device-position="{{cameraPos}}" wx:if="{{showCamera}}">
  <view class="Cameraoptions">
    <view class="takePicBtn">
       <!-- 摄像头的返回按钮 -->
       <cover-image class="confirm" src="" bindtap="GoBack"></cover-image>
       <!-- 照相的按钮 -->
       <cover-view bindtap="getPhoto"></cover-view>
       <!-- 摄像头的前后转换按钮 -->
       <cover-image class="switch" src="" bindtap='changePos'></cover-image>
   </view>
  </view>
</camera>

cover-view:

覆盖在原生组件之上的文本视图,可覆盖的原生组件包括:map(地图)、video(视频)、canvas(画布)、camera(系统相机)、live-pusher(实时音视频播放),只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。

cover-image:

覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持覆盖在cover-view里。

device-position:

是用来切换前置摄像头还是后置摄像头,front是前置摄像头,back是后置摄像头

index.js

// 照相
  getPhoto() {
    // c创建相机上下文对象,获取唯一的相机对象
    var context = wx.createCameraContext()
    // 照相功能
    context.takePhoto({
      quality: "high",
      success: res => {
        // 照相成功的回调
        console.log(res);  // 图片的信息
        this.setData({
          // 隐藏相机
          //  showCamera:false,
          imageUrl: res.tempImagePath,
          imgwidth: res.width,
          imgheight: res.height
        })
        console.log(this.data.imageUrl)
      },
      fail: () => {
        wx.showToast({
          title: '出现错误',
        })
      }
    })
  },
 
// 相机前后镜头转换
  changePos() {
    this.setData({
      cameraPos: this.data.cameraPos == "back" ? "front" : "back"
    })
  },
 
// 关闭相机
  goBack() {
    this.setData({
      showCamera: false,
    })
  },

拍照成功回调函数的res是我们拍照照片的一些信息,其中res.tempImagePath是我们图片的本地路径,我当时还有一个裁剪图片的功能,这里没有写上去。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现拍照功能

本文链接: https://www.lsjlt.com/news/145865.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现拍照功能
    小程序实现一个拍照功能,亲测可用。 页面的样式都是我自己写的,当然你们也可以自己排版写样式。下面一共有三个按钮,返回按钮、拍照按钮、切换摄像头按钮。 首先相机页面是通过wx:if来...
    99+
    2022-11-13
  • 微信小程序实现拍照打卡功能
    本文实例为大家分享了微信小程序实现拍照打卡的具体代码,供大家参考,具体内容如下 由于拍照组件是相当于一个块,用隐藏显示的方法不太好,为了更好的用户交互,选择了在一个新的页面调用相机组...
    99+
    2022-11-13
  • 微信小程序调用摄像头实现拍照功能
    本文实例为大家分享了微信小程序调用摄像头实现拍照的具体代码,供大家参考,具体内容如下 微信小程序开发文档 首先,需要用户授权摄像头权限,这一步是必须的 具体步骤: 1、获取用户当前授...
    99+
    2022-11-13
  • 微信小程序实现拍照和相册选取图片
    本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下 布局: <!--pages/camera/camera.wxml--> &l...
    99+
    2022-11-12
  • uni-app实现微信小程序长按拍视频功能
    本文实例为大家分享了uni-app实现微信小程序长按拍视频功能的具体代码,供大家参考,具体内容如下 html <!-- 上传视频 -->      <view cl...
    99+
    2022-11-13
  • 微信小程序如何实现拍照和相册选取图片
    这篇文章将为大家详细讲解有关微信小程序如何实现拍照和相册选取图片,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下布局:<!--pages/camera/camera.wxml-->&...
    99+
    2023-06-15
  • HTML5如何实现微信拍摄上传照片功能
    这篇文章主要介绍HTML5如何实现微信拍摄上传照片功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前端代码$(':file').on('change'...
    99+
    2022-10-19
  • 微信小程序中如何实现chooseImage选择图片或者拍照
    这篇文章将为大家详细讲解有关微信小程序中如何实现chooseImage选择图片或者拍照,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 chooseImage选择...
    99+
    2022-10-19
  • 微信小程序实现书架小功能
    本文实例为大家分享了微信小程序实现书架功能的具体代码,供大家参考,具体内容如下 实现书架的功能,点击之后可以看pdf 1.设定点击事件 2.在点击事件里面 2.1下载 wx.down...
    99+
    2022-11-13
  • 微信小程序实现翻牌小功能
    本文实例为大家分享了微信小程序翻牌小功能,供大家参考,具体内容如下 页面 <view id="container">     <view wx:for="{{new...
    99+
    2022-11-13
  • 微信小程序如何调用内置照相机实现拍照及图片上传
    这篇文章主要介绍了微信小程序如何调用内置照相机实现拍照及图片上传的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何调用内置照相机实现拍照及图片上传文章都会有所收获,下面我们一起来看看吧。  1.ind...
    99+
    2023-06-26
  • 微信小程序实现照片裁剪
    本文实例为大家分享了微信小程序实现照片裁剪的具体代码,供大家参考,具体内容如下 前段时间用小程序的canvas、movable-area、movable-view封装了一个按比例裁剪...
    99+
    2022-11-13
  • 微信小程序实现分页功能
    本文实例为大家分享了微信小程序实现分页的具体代码,供大家参考,具体内容如下 今天被提了个需求,需要小程序上实现分页,搜索能力不行,没找到demo,自己想了一下逻辑然后,就自己写了,不...
    99+
    2022-11-13
  • 微信小程序实现答题功能
    本文实例为大家分享了微信小程序实现答题功能的具体代码,供大家参考,具体内容如下 view <view class="topnav">   <image src="...
    99+
    2022-11-13
  • 微信小程序实现评价功能
    本文实例为大家分享了微信小程序实现评价的具体代码,供大家参考,具体内容如下 首先去图标库,找一个空心星图片和一个实星图片 先是效果图 代码 wxml文件 for循环5次,初始值是5...
    99+
    2022-11-13
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多...
    99+
    2022-11-12
  • Android中怎么实现微信朋友圈拍照上传功能
    Android中怎么实现微信朋友圈拍照上传功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1. PhotoPicker的使用这是一个支持选择多张图片,点击图片放大,图片之间左...
    99+
    2023-05-30
  • Android自定义Camera实现拍照小功能
    本文实例为大家分享了Android自定义Camera实现拍照的具体代码,供大家参考,具体内容如下 本篇文章就项目开发遇到问题记录下; 1.拍照图片被压缩问题2.拍照图片被旋转问题 首...
    99+
    2022-11-13
  • Android仿微信选择图片和拍照功能
    本文实例为大家分享了 Android微信选择图片的具体代码,和微信拍照功能,供大家参考,具体内容如下 1.Android6.0系统,对于权限的使用都是需要申请,选择图片和拍照...
    99+
    2022-06-06
    选择 图片 Android
  • 微信小程序实现聊天室功能
    本文通过实例为大家分享了微信小程序实现聊天室的具体代码,供大家参考,具体内容如下 1.实现效果展示 2.room.wxml <view class="container"...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作