开发者社区> 问答> 正文

小程序如何唤起前置摄像头实现拍照功能

1、需求:默认使用前置摄像头拍照 2、camera组件未开放,无法拍照 3、请问还有其他方式来实现这个需求吗?

展开
收起
游客sab5dbg4frtx4 2020-05-09 10:28:34 1386 0
1 条回答
写回答
取消 提交回答
  • 1.需求:点击扫码按钮,扫描二维码识别单号 实现:

         <image src="../../we7/img/sao.png" class="saoimg"></image>
    

    scanCode: function() { var that = this;

    wx.scanCode({ success(res) { app.showToast('扫描成功')

    that.setData({ kuaidi: res.result

    });

    },

    fail(res) { app.showToast('扫描失败,重新扫描')

    },

    })

    },

    2.需求,点击拍照,调用后置摄像头,拍照上传图片

    phoTo是跟在bindTap后面调用的函数 如果只是简单的调用后置摄像头拍照,建议选择wx.chooseImage的API,不会涉及到微信的授权问题,比较方便,直接指定camera,返回的res.tempFilePaths可以直接显示在页面上,不会涉及到编写相机的样式。

    phoTo:function() { var t = this;

    wx.chooseImage({ count: 1,

    sizeType: ['compressed'],

    sourceType: ['camera'],

    success(res) { const tempFilePaths = res.tempFilePaths

    wx.uploadFile({ url: app.util.rootlink + 'api/common/updateImage',

    filePath: tempFilePaths[0],

    header: { 'content-type': 'multipart/form-data'

    },

    name: 'image',

    formData: null,

    success: function (res) { var result = JSON.parse(res.data)

    if (result.code == 200) { var params = { method: 'post',

    data: { id: t.data.id, img: result.data.path },

    token: wx.getStorageSync('token'),

    success: function (res) { if (res.data.code && res.data.code == 200) { app.showToast(res.data.msg);

    setTimeout(function () { wx.navigateTo({ url: './confirmtwo?id=' + t.data.id,

    })

    },1000)

    }

    },

    fail: function (result) { console.log('失败: ', result);

    }

    }

    app.util.ajax(params, 'api/user/signImg');

    } else { app.showToast(result.msg)

    }

    },

    fail: function (res) { app.showToast('请重新拍照')

    }

    })

    },

    fail(err) { app.showToast('拍照失败')

    }

    })

    },

    3.需求,调用前置摄像头拍照

    提示:这里使用微信的组件camera,会涉及到用户授权,样式也是需要自己去调整,默认是调用后置摄像头,device-position="front" 就会设置是前置摄像头

    //拍照

    takePhoto() { const ctx = wx.createCameraContext()

    ctx.takePhoto({ quality: 'high',

    success: (res) => { this.setData({ src: res.tempImagePath //返回的路径 可以作为src显示在页面上

    })

    }

    })

    },

    //用户拒绝授权后调用的函数

    error(e) { console.log(e.detail)

    },

    2021-02-07 20:08:48
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《云市场-小程序》 立即下载
数字乡村建设方案 立即下载
mPaaS 小程序新品发布 立即下载