精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序实现拍照画布指定区域生成图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序实现自定义拍照功能主要使用到如下的组件和API 1:camera组件 常见的属性有: (1):mode 应用模式,只在初始化时有效,不能动态变更,参数有:normal(相机模式),scanCode(扫码模式) ,默认为normal (2)...
  • 主要介绍了微信小程序拍照和摄像功能实现方法,结合实例形式分析了微信小程序拍照与摄影功能的原理、相关实现技巧与注意事项,需要的朋友可以参考下
  • 本文实例讲述了微信小程序实现分享朋友圈的图片功能。分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅...
  • 主要介绍了微信小程序实现点击拍照长按录像功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要介绍了微信小程序实现身份证取景框拍摄,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序实现一个拍照功能,亲测可用。 页面的样式都是我自己写的,当然你们也可以自己排版写样式。下面一共有三个按钮,返回按钮、拍照按钮、切换摄像头按钮。 首先相机页面是通过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是我们图片的本地路径,我当时还有一个裁剪图片的功能,这里没有写上去。

    展开全文
  • 主要为大家详细介绍了微信小程序实现电子签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给...

    微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法。分享给大家供大家参考,具体如下:

    微信小程序拍照: API:wx.chooseImage

    原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后的工作完全交给底层去实现,简直是简单到没朋友:

    // 微信小程序拍照功能
    getLocalImage:function(){
        var that=this;
        wx.chooseImage({
          count:1,
          success:function(res){
            // 这里无论用户是从相册选择还是直接用相机拍摄,拍摄完成后的图片临时路径都会传递进来
            app.startOperating("保存中")
            var filePath=res.tempFilePaths[0];
            var session_key=wx.getStorageSync('session_key');
            // 这里顺道展示一下如何将上传上来的文件返回给后端,就是调用wx.uploadFile函数
            wx.uploadFile({
              url: app.globalData.url+'/home/upload/uploadFile/session_key/'+session_key,
              filePath: filePath,
              name: 'file',
              success:function(res){
                app.stopOperating();
                // 下面的处理其实是跟我自己的业务逻辑有关
                var data=JSON.parse(res.data);
                if(parseInt(data.status)===1){
                  app.showSuccess('文件保存成功');
                }else{
                  app.showError("文件保存失败");
                }
              }
            })
          },
          fail:function(error){
            console.error("调用本地相册文件时出错")
            console.warn(error)
          },
          complete:function(){
          }
        })
      },
    
    

    微信小程序录像拍摄  API:wx.chooseVideo

    其实跟上面的原理是一样的,对应的API就是wx.chooseVideo,其中可以设置拍摄时间,用户拍摄结束以及用户拍摄时间超时等,都会调用success的回调函数,所以又是可以安心处理接下来的业务流程,而不用需要调用camera组件。

    // 摄像功能
      getLocalVideo:function(){
        var that=this;
        var session_key=wx.getStorageSync('session_key');
        wx.chooseVideo({
          maxDuration:10,
          success:function(res1){
            app.startOperating("上传中")
            // 这个就是最终拍摄视频的临时路径了
            var tempFilePath=res1.tempFilePath;
          },
          fail:function(){
            console.error("获取本地视频时出错");
          }
        })
      },
    
    

    实现起来也是很简单,但是有一个问题就是没有办法像调用camera组件一样获取视频的缩略图,这是现在唯一的缺陷。但是总体来说,比起调用camera组件,这样实现起来的确简单了很多。

     

     

    展开全文
  • 主要介绍了微信小程序实现图片上传、删除和预览功能的方法,涉及微信小程序界面布局、事件响应及图片操作相关实现技巧,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序实现人脸识别,实现添加信息和上传照片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序-拍照或选择图片并上传文件的相关资料,需要的朋友可以参考下
  • 小龙大哥的微信小程序在初始阶段相当于IE界的6,在这里给大家说一个刚趟过去的坑。 拍照的API。 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认...
  • 本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一)、功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片。 其他要点:textarea使用,...
  • 微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下...
  • 本文实例为大家分享了微信小程序使用前置摄像头拍照的具体代码,供大家参考,具体内容如下 1、拍照页面: 拍照> <camera v-if=openCamera device-position=front frame-size=large class=zipai error=error> ...
  • 本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var ...
  • 第20课 微信小程序实现相机拍照功能 效果图如下: camera标签自动打开摄像头 camera标签详情: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html 首先wxml代码: <view> <text&...

    第20课 微信小程序实现相机拍照功能

    效果图如下:

    在这里插入图片描述

    camera标签自动打开摄像头

    camera标签详情: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

    首先wxml代码:

    <view>
      <text>相机拍照功能</text>
      <button class="photo" bindtap="takePhoto">点击拍照</button>
    </view>
    

    js代码:

    takePhoto(){	
        wx.navigateTo({
          url: '/pages/photo/photo',	//跳转到自定义的一个拍照页面
        })
      },
    

    pages/photo/photo页面内的代码如下:

    wxml代码:

    <camera
      class="camera"
      frame-size="large"
    ></camera>
      <!-- frame-size="large"拍照图片高清 -->
    <button class='record' bindtap='record'>拍摄</button>
    

    js代码

    相机方法的使用文档
    https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.takePhoto.html

      // 拍摄按钮按下, 执行record 触发拍摄
      record(){
        this.data.cameraContext = wx.createCameraContext()
        this.data.cameraContext.takePhoto({
          quality:"high", //高质量的图片
          success: res => {
            //res.tempImagePath照片文件在手机内的的临时路径
            let tempImagePath = res.tempImagePath
            wx.saveFile({
              tempFilePath: tempImagePath,
              success: function (res) {
                //返回保存时的临时路径 res.savedFilePath
                const savedFilePath = res.savedFilePath
                // 保存到本地相册
                wx.saveImageToPhotosAlbum({
                  filePath: savedFilePath,
                })
              },
              //保存失败回调(比如内存不足)
              fail: console.log
            })
          }
        })
      }
    

    wxss代码:

    /* pages/photo/photo.wxss */
    .camera{
      width: 100vw;
      height: 100vh;
    }
    .record{
      position: fixed;
      bottom: 10rpx;
      left: 0;
      right: 0;
      width: 120rpx;
      height: 120rpx;
      margin: auto;
      border-radius: 50%;
    }
    
    展开全文
  • 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到...
  • 本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。 一、首先是视图层index.wxml,视图层...
  • 通过封装组件的方式实现 html {{name}} css .water { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: row; justify-content: space-between; ...
  • 微信小程序api wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 代码: wx.chooseImage({ ...

    微信小程序api

    wx.chooseImage(Object object)

    从本地相册选择图片或使用相机拍照。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

    代码:

    wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
              var tempFilePaths = res.tempFilePaths
              console.log(tempFilePaths )
            },
    		//回调函数
            complete:function(){
              console.log("--complete--")
            }
          })
    
    展开全文
  • 微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。 参数 Object object 属性 类型 默认值 必填 说明 count number 9 否 最多可以选择的图片张数 ...
  • 目前组件支持缩放比例0.5~20,支持拖动操作,通过wx.navigateTo跳转到组件页面调用,可接受的参数: imagepath:预截取图片路径 iszoomed:是否可以对图片进行缩放 centerwidth: 截取框宽度 centerheight: 截取框...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,270
精华内容 2,908
关键字:

微信小程序实现拍照

微信小程序 订阅