精华内容
下载资源
问答
  • 小程序自定义相机

    千次阅读 2018-10-29 17:39:05
    1.要求相机是圆形的,因为小程序调用原生相机,永远在屏幕最顶层,只能在camera标签里使用cover-view和cover-image标签,用一张图片盖在相机上,效果如下图: <!-- 调用摄像头的组件--> <...

    1.要求相机是圆形的,因为小程序调用原生相机,永远在屏幕最顶层,只能在camera标签里使用cover-view和cover-image标签,用一张图片盖在相机上,效果如下图:

    <!-- 调用摄像头的组件-->

    <view class='cameraBox' >

    <camera class='camera' device-position="front" flash="off" binderror="error">

    <cover-view class='cameraGai'>

    <!-- <cover-image src='../images/shape/bg.png' class='cover-animate'></cover-image> -->

    <cover-image src='../images/vip.png' class='cover-image'></cover-image>

    </cover-view>

    </camera> 

    </view>

     

    因为要求调用前置摄像头,所以device-position="front"

    详细可参考https://blog.csdn.net/u010606780/article/details/80887589

    展开全文
  • 小程序取景框内拍照 实时显示当前时间 显示当前经纬度 显示当前街道信息 可本地保存照片 代码实现 1、拍照功能 拍摄照片:CameraContext.takePhoto(Object object) 相机授权请求:wx.authorize(Object object...

    CustomCamera

    功能介绍 与 展示

    • 小程序取景框内拍照
    • 实时显示当前时间
    • 显示当前经纬度
    • 显示当前街道信息

    在这里插入图片描述

    在这里插入图片描述

    • 可本地保存照片

    在这里插入图片描述

    代码实现

    1、拍照功能

    拍摄照片:CameraContext.takePhoto(Object object)
    相机授权请求:wx.authorize(Object object)

      onShow: function () {
        this.getLocation();
        var that = this
        wx.authorize({
          scope: 'scope.camera',
          success: function (res) {
            that.setData({
              isShowCamera: true,
            })
          },
          fail: function (res) {
            console.log("" + res);
            wx.showModal({
              title: '请求授权您的摄像头',
              content: '如需正常使用此小程序功能,请您按确定并在设置页面授权用户信息',
              confirmText: '确定',
              success: res => {
                if (res.confirm) {
                  wx.openSetting({
                    success: function (res) {
                      console.log('成功');
                      console.log(res);
                      if (res.authSetting['scope.camera']) { //设置允许获取摄像头
                        console.log('设置允许获取摄像头')
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        })
                        that.setData({
                          isShowCamera: true,
                        })
                      } else { //不允许
                        wx.showToast({
                          title: '授权失败',
                          icon: 'none',
                          duration: 1000
                        })
                        wx.navigateBack({
                          delta: 1
                        })
                      }
                    }
                  })
                } else { //取消
                  wx.showToast({
                    title: '授权失败',
                    icon: 'none',
                    duration: 1000
                  })
                  wx.navigateBack({
                    delta: 1
                  })
                }
              }
            })
          }
        })
      },
    
    takePhoto: function() {
        var that = this
        that.ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            wx.setStorage({
              key: 'originalImagePath',
              data: res.tempImagePath,
            })
            wx.navigateTo({
              url: 'upload?path=' + res.tempImagePath + '&char=0'
            })
          }
        })
      },
    

    2、拍照后生成画布

    获取系统信息来绘制画布(宽高等):wx.getSystemInfo(Object object)
    获取图片信息:wx.getImageInfo(Object object)
    创建 canvas 的绘图上下文 CanvasContext 对象:CanvasContext wx.createCanvasContext(string canvasId, Object this)
    把当前画布指定区域的内容导出生成指定大小的图片:wx.canvasToTempFilePath(Object object, Object this)

      getCanvas(path){
        var that = this
        wx.getSystemInfo({
          success: function (res) {
            var width = res.windowWidth
            var height = res.windowHeight
            var gap = 40
            that.setData({
              width: width,
              height: height,
              gap: gap
            })
            wx.getImageInfo({
              src: that.path,
              success: function (res) {
                that.canvas = wx.createCanvasContext("image-canvas", that)
                that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
     
                that.canvas.setFontSize(16);
                that.canvas.setFillStyle('#fff');
                that.canvas.fillText(that.data.currentTime, 50, 450)
               
                that.canvas.setFontSize(16)
                that.canvas.setFillStyle('#fff')
                that.canvas.fillText('经度:'+ that.data.gps.longitude + ' 纬度:' + that.data.gps.latitude, 50, 475)
    
                that.canvas.setFontSize(16)
                that.canvas.setFillStyle('#fff')
                that.canvas.fillText( that.data.district+ '附近', 50, 500)
    
                wx.showLoading({
                  title: '数据处理中',
                  mask: true
                })
                that.canvas.setStrokeStyle('red')
                // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的
                //过渡页面中,对裁剪框的设定
                that.canvas.draw()
                setTimeout(function () {
                  wx.canvasToTempFilePath({ //裁剪对参数
                    canvasId: "image-canvas",
                    x: that.data.gap, //画布x轴起点
                    y: that.data.gap, //画布y轴起点
                    width: that.data.width - 2 * that.data.gap, //画布宽度
                    height: 500, //画布高度
                    destWidth: that.data.width - 2 * that.data.gap, //输出图片宽度
                    destHeight: 500, //输出图片高度
                    canvasId: 'image-canvas',
                    success: function (res) {
                      that.filePath = res.tempFilePath
                      //清除画布上在该矩形区域内的内容。
                      that.canvas.clearRect(0, 0, that.data.width, that.data.height)
                      that.canvas.drawImage(that.filePath, that.data.gap, that.data.gap, that.data.width - that.data.gap * 2, 500)
                      that.canvas.draw()
                      wx.hideLoading()
                      //在此可进行网络请求
    
                    },
                    fail: function (e) {
                      wx.hideLoading()
                      wx.showToast({
                        title: '出错啦...',
                        icon: 'loading'
                      })
                    }
                  });
                }, 1000);
              }
            })
          }
        })
      },
    

    3、获取当前时间

    const moment = require("dayjs");
    
    setInterval(function () {
          const _currentTime = moment().format("YYYY年MM月DD日 HH:mm:ss", util.formatTime(new Date()).split(" ")[1]);
          that.setData({
            currentTime: _currentTime,
          });
    }, 1000)
    

    4、获取位置信息

    获取当前的地理位置、速度:wx.getLocation(Object object)

    let keys = 'SGXBZ-6X3K6-NYLSF-MALZD-QC6PK-BABOS';
    
    getLocation() {
        let that = this;
        wx.getLocation({
          type: "wgs84",
          success(res) {
            that.setData({
              gps: {
                latitude: res.latitude.toFixed(4),
                longitude: res.longitude.toFixed(4),
              },
            });
            that.getDistrict(res.latitude.toFixed(4), res.longitude.toFixed(4));
          },
        });
    },
    getDistrict(latitude, longitude) {
        let that = this;
        wx.request({
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}`,
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            // 省
            let province = res.data.result.address_component.province;
            // 市
            let city = res.data.result.address_component.city;
            // 区
            let district = res.data.result.address_component.district;
            that.setData({
              district: res.data.result.address,
              region: [province, city, district]
            })
          }
        })
    },
    
    

    5、图片保存

    把当前画布指定区域的内容导出生成指定大小的图片:wx.canvasToTempFilePath(Object object, Object this)
    保存图片到系统相册:wx.saveImageToPhotosAlbum(Object object)

    downImg() {
        let that = this;
        wx.canvasToTempFilePath({
          canvasId: "image-canvas",
          x: that.data.gap, //画布x轴起点
          y: that.data.gap, //画布y轴起点
          width: that.data.width - 2 * that.data.gap, //画布宽度
          height: 500, //画布高度
          destWidth: that.data.width - 2 * that.data.gap, //输出图片宽度
          destHeight: 500, //输出图片高度
          success: res => {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(e) {
                wx.showToast({
                  title: '保存成功',
                  icon: 'none',
                  duration: 2000
                })
              },
              fail(e) {
                wx.getSetting({
                  success(res) {
                    if (!res.authSetting["scope.writePhotosAlbum"]) {
                      wx.showModal({
                        title: '警告',
                        content: '请打开相册权限,否则无法保存图片到相册',
                        success(res) {
                          if (res.confirm) {
                            wx.openSetting({
                              success(res) {
                                console.log(res)
                              }
                            })
                          } else if (res.cancel) {
                            wx.showToast({
                              title: '取消授权',
                              icon: "none",
                              duration: 2000
                            })
                          }
                        }
                      })
                    }
                  }
                })
              }
            })
          },
          fail: err => {
            console.log(err)
          }
        })
      },
    

    写在最后

    上面只展示了功能的部分核心代码,想要跑跑demo看效果的朋友可以去github上download哦,github地址:CustomCamera

    展开全文
  • 需求:近来微信小程序有个需求,自定义相机拍照,并且要在相机中画一个框,提示用户把拍摄内容放入框中,类似于上传身份证时那个头像,国徽对其的框。(因为我们上传的是一份A4纸的病例),所以需要这样。然后后台...

    需求:近来微信小程序有个需求,自定义相机拍照,并且要在相机中画一个框,提示用户把拍摄内容放入框中,类似于上传身份证时那个头像,国徽对其的框。(因为我们上传的是一份A4纸的病例),所以需要这样。然后后台解析上传的病例图片,返回给我病例数据,我把数据填充到表单中。

    调研1: 首先想到的是调用微信的 wx.chooseImage  ,由用户选择是 解析本地的图片,还是拍照,但是发现一个问题,如下:

    1)无法自定义相机,导致用户没办法参考拍摄成什么样照片为合格,目前没找到办法。

     

    调研2: 后来发现微信小程序组件提供了 camera 相机组件,经过测试,可以自定义相机。(调用相机时会有权限提示)实现方法为,写一个辅助框,定位到相机上面,就实现了。(其余身份证框,头像框实现原理可能也一样,或者用canvas 画,个人理解)

     

    调研3: 后台说拍摄的图片大小不能超过4M,所以我需要验证一下图片的大小,但是 camera 拍照成功之后拿不到 照片的源文件,只有返回 tempImagePath  (照片的临时路径,本地路径),现在计算根据临时路径来解析图片大小,

    发现 官方有提供api ,wx.getFileInfo ,可以解析。但是经过测试,解析出来的图片大小,只有 0.XXXX M ,不知道为什么,可能官方压缩了。 (后来此方法注释掉了)

     

    调研4: 刚开始我以为上传是把拍摄好的图片源文件 传给后台,后来发现传的是一个本地路径,成功之后由后台用路径解析出图片,在解析图片,然后把数据返回给我。

    现在完整的流程通了,以下为代码

    <!--pages/photograph/photograph.wxml-->
    <!-- <text>pages/photograph/photograph.wxml</text> -->
    <view class="photo">
      <camera device-position="back" flash="off" binderror="cameraError" class="camera">
        <view class="photo-border"></view>
      </camera>
      <!-- <view>{{size}}</view> -->
      <!-- <image mode="widthFix" src="{{src}}"></image> -->
      <van-button color="#37b9c6" block type="primary" bind:click="takePhoto">确定</van-button>
    </view>
    

     

    /* pages/photograph/photograph.wxss */
    .photo{
      /* height: 100%; */
      /* width: 100%; */
      position: relative;
    
    }
    .camera{
      height: calc(100vh - 130rpx);
      width: 100%;  
      position: relative;
      margin-bottom: 20rpx;
    }
    .photo-border{
      position: absolute;
      left:15rpx;
      top:25rpx;
      width: calc(100% - 30rpx);
      height: calc(100vh - 180rpx);
      border: 1px solid #37b9c6;
    }
    // pages/photograph/photograph.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        src:'',
        size:0,
      },
      takePhoto() {
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            console.log(res);
            // wx.getFileInfo({
            //   filePath:res.tempImagePath,
            //   success: (res)=> {
            //     let size=res.size/1024/1024;
            //     this.setData({
            //       size: size
            //     })
            //     console.log(res.size)
            //     console.log(res.digest)
            //   }
            // })
            wx.uploadFile({
              url: 'url',  //此处为后台服务器上传路径
              filePath: res.tempImagePath,
              name: 'name', 
              success: (res)=>{ //一下为自己的逻辑
                app.globalData.photoData=res.data;
                //do something
                wx.navigateBack({
                  delta: 1 //返回上一级页面
                })
              },
              fail:()=>{
                wx.showToast({
                  title: '上传失败',
                  icon: 'none'
                })
              }
            })
          }
        })
      },
      cameraError(e) {
        console.log(e.detail)
        wx.showToast({
          title: '以拒绝,使用请手动开启',
          icon:'none'
        })
        setTimeout(()=>{
          wx.navigateBack({
            delta: 1 //返回上一级页面
          })
        },3000)
      }
    })

     

    展开全文
  • 最近在写小程序项目,需要将拍摄的照片裁剪,去掉多余的部分。 说说本人遇到的bug,一开始在编辑器上测试,没有问题,后面真机调试或预览模式,裁剪的照片坐标都有问题,找了很久才发现是像素的原因,所以在写的...

    最近在写小程序项目,需要将拍摄的照片裁剪,去掉多余的部分。

    说说本人遇到的bug,一开始在编辑器上测试,没有问题,后面真机调试或预览模式,裁剪的照片坐标都有问题,找了很久才发现是像素的原因,所以在写的时候,一定要特别注意“设备像素比”

    重点一定要计算像素比,不然会得不到想要的效果.

    该项目主要用于实现下图功能

    wxml代码

    <cover-view class="lary-top" style="height:{{info.statusBarHeight}}px;"></cover-view>
    <camera class="camera-photo" frame-size="small" device-position="{{devBack}}" flash="off" binderror="error" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px">
    	<cover-view class="page-flex" style="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;">
    		<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view>
    		<cover-view class="page-content" style="height:{{info.windowHeight}}px;">
    			<cover-view class="page-mask" style="height:{{convasY-40}}px;"></cover-view>
    			<cover-view style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:auto"></cover-view>
    			<cover-view class="page-mask tackPhoto" style="height:{{convasY+40}}px">
                    <cover-view class="confirm-photo" bindtap="takePhoto">确定</cover-view>
                    <cover-view bindtap="cancelPhoto" class="cancel">取消</cover-view>
                </cover-view>
    		</cover-view>
    		<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view>
    	</cover-view>
        <cover-view class="id-card">
            请拍摄身份证
            <cover-view class="id-card-text">人像面</cover-view>
        </cover-view>
    </camera>
    <canvas wx:if="{{isCanvas}}" class="canvas-style" canvas-id="myCanvas" style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;"></canvas>
    
    <cover-image wx:if="{{isBaseImg}}" class="base-img" mode="aspectFit" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px" src="{{baseImg}}"></cover-image>
    <cover-view wx:if="{{isSuccess}}" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px;" class="success-img">
        <cover-image style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:{{convasY-40}}px auto;" src="{{srcCanvasPath}}"></cover-image>
        <cover-view class="after-img-tips" style="color:#fff">
            <!-- 取消绘制,重新绘制 -->
            <!-- <cover-image class="back" src="../../../assets/back.png" catchtap="clearPhoto"></cover-image> -->
            <cover-view class="back" catchtap="clearPhoto">重新绘制</cover-view>
            <!-- 确定绘制,返回到相应的页面,或者隐藏camera组件 -->
            <!-- <cover-image class="back" src="../../../assets/icon_05-min.png" catchtap="confirmBack"></cover-image> -->
            <cover-view class="back" catchtap="confirmBack">绘制完成</cover-view>
        </cover-view>
    </cover-view>
    

    wxss代码

    .lary-top{
      position: fixed;
      z-index: 101;
      top: 0;
      width: 100%;
      background:#3b8bff
    }
    .camera-photo{
        position: fixed;
        z-index: 100;
        overflow: hidden;
    }
    .page-flex{
        display: flex;
    }
    .page-mask{
        background-color: rgba(0,0,0,0.6);
      }
      .page-mask-lr{
        width: 90rpx;
      }
      .page-content{
        flex:1
      }
      .tackPhoto{
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .confirm-photo{
          width: 130rpx;
          height: 130rpx;
          background-color: #3b8bff;
          border-radius: 50%;
          text-align: center;
          line-height: 130rpx;
      }
      .cancel{
        position: absolute;
        right: 90rpx;
    }
    .id-card{
      position: absolute;
      font-size: 36rpx;
      color: #fff;
      top:53%;
      right: 40rpx;
      display: flex;
      align-items: center;
      transform-origin: right;
      transform: rotate(90deg);
    }
    .id-card-text{
        color:#3b8bff
    }
    .canvas-style{
      margin: auto;
      overflow: hidden;
    }
    .base-img{
      position: fixed;
      z-index: 101;
    }
    .success-img{
      position: fixed;
      z-index: 101;
      background-color: black;
    }
    .after-img-tips{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      position: fixed;
      bottom: 75rpx;
      padding-left: 60rpx;
      padding-right: 60rpx;
      box-sizing: border-box;
    }
    .back{
      width: 141rpx;
      height: 141rpx;
    }

    js代码

    const app = getApp()
    let ctxWidth = '';
    let ctxHeight = '';
    let ctx = null; //Camera
    let canvaCtx=null;//canvas
    Page({
      data: {
    
      },
      changeText() {
        wx.getSystemInfo({
          success: res => {
            let convasX = res.screenWidth / 4; //遮罩层上下的高度(生成canvas的起始横坐标)
            let convasY = res.screenHeight / 5; //遮罩层左右的宽度(生成canvas的起始纵坐标)
            let canvasWidth = convasX * 3; //中间裁剪部位的宽度
            let canvasHeight = convasY * 3; //中间裁剪部位的高度
            let convasXL = convasX / 2;
            ctxWidth = canvasWidth; //canvas的宽度
            ctxHeight = canvasHeight; //canvas的高度
            this.setData({
              info: res,
              canvasWidth,
              canvasHeight,
              convasX,
              convasXL,
              convasY
            })
          }
        })
      },
      onLoad: function () {},
      onShow() {
        this.changeText()
      },
      takePhoto() {
        ctx = wx.createCameraContext(); //初始化camera
        ctx.takePhoto({ //生成图片
          quality: 'high',
          success: (res) => { //得到图片
            this.takeCanvas(res.tempImagePath)
            this.setData({
              baseImg: res.tempImagePath,
              isBaseImg: true,
              isCanvas:true
            })
          }
        })
      },
      takeCanvas(path) { //将拍摄的照片绘制到canvas上
        wx.getImageInfo({
          src: path,
          success: imgInfo => {
            let {info} = this.data;
            let convasX = imgInfo.width / 4;
            let convasY = imgInfo.height / 5;
            let canvasWidth = convasX * 3;
            let canvasHeight = convasY * 3;
            let convasXL = convasX / 2;
            // 我这里宽度和高度都计算了设备比,其实两个值是一样的 ,计算一个就够了
            let prxHeight = info.windowHeight / imgInfo.height;//计算设备比
            let prxWidth = info.windowWidth / imgInfo.width;//计算设备比
            // ctx = wx.createCanvasContext("myCanvas", this);//自定义组件,需要加this
            canvaCtx = wx.createCanvasContext("myCanvas");//自定义组件,需要加this
            canvaCtx.drawImage(path,convasXL,(convasY-40),canvasWidth,canvasHeight,0,0,(parseInt(canvasWidth) * prxWidth),(parseInt(canvasHeight) * prxHeight));//绘制到canvas上的位置,canvas的宽高等
            canvaCtx.draw(true, () => {
              wx.canvasToTempFilePath({
                fileType: "jpg",
                quality: 0.3,
                canvasId: "myCanvas",
                success: canvasToPath => {
                  this.setData({
                    isSuccess:true,
                    isBaseImg: false,
                    isCanvas:false,
                    baseImg: canvasToPath.tempFilePath,
                    srcCanvasPath: canvasToPath.tempFilePath
                  })
                }
              })
              // wx.canvasToTempFilePath({
              //   fileType: "jpg",
              //   quality: 0.3,
              //   canvasId: "myCanvas",
              //   success: canvasToPath => {
              //     this.setData({
              //       isBaseImg: false,
              //       baseImg: canvasToPath.tempFilePath,
              //       srcCanvasPath: canvasToPath.tempFilePath
              //     })
              //   }
              // }, this)//自定义组件需要加this
            })
          }
        })
      },
      clearPhoto(){
        canvaCtx.clearRect(0,0,ctxWidth, ctxHeight)
        canvaCtx.draw()
        this.setData({
            srcCanvasPath:"",
            isCanvas:false,
            isSuccess:false,
            isBaseImg:false
        })
      },
      confirmBack(){//确定绘制成功后的操作,根据自己的需求写即可
    
      }
    })

    最终效果

    展开全文
  • 微信小程序自定义相机

    千次阅读 2020-03-07 13:31:33
    小程序自定义相机?其实有些名不副实,因为小程序给提供的接口简单到不能再简单,不给你丝毫修改的机会,能做的不过是在相机上覆盖cover-view、cover-image、canvas之类的,来提升相机的拍照体验。今天说的这个...
  • 文章目录1.界面效果2.界面布局3.页面逻辑实现4.页面样式5....1.界面效果 说明:底部第一个按钮返回,底部第二个按钮拍照,底部第三个按钮前置摄像头与后置摄像头切换,此功是自拍,默认是前置摄像头,注意图片二是...
  • 在微信小程序中实现自定义拍照功能主要使用到如下的组件和API 1:camera组件 常见的属性有: (1):mode 应用模式,只在初始化时有效,不能动态变更,参数有:normal(相机模式),scanCode(扫码模式) ,默认为normal (2)...
  • 自定义相机程序

    2014-12-22 11:09:17
    自定义相机和裁剪,实现了连续对焦、点击对焦、变焦,拍照后自定义裁剪、旋转
  • 1、页面路径 "pages/camera/takePhoto" 2、样式:takePhoto.wxss .fullscreen{ width: 100%; height: 100%; } .icon-take{ width: 150rpx; height: 150rpx; position: absolute;...} } }) } 初学小程序,请多多指教
  • 微信小程序自定义拍照页面开发

    万次阅读 2018-07-02 17:54:33
    实现效果:用到的组件:camera,cover-image,cover-view解决思路:在官方文档搜索camera组件,注意到cover-view介绍里有一句“可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持...
  • 微信小程序上传头像后对图片进行裁剪的功能,这是必要的核心代码,放在组件文件夹中就可以使用
  • 微信小程序自定义扫码

    千次阅读 2020-08-18 10:17:14
    在开发过程中,经常会遇到像下面这种的需求,这种时候如果使用微信自带的扫码功能的话,他们的页面我们是没有办法去编辑的,这种时候我们就需要用到自定义一个扫码界面,用到的是微信小程序的camera组件 在小程序...
  • android自定义相机,输出自定义大小的照片,并将图片转化为byte[]以供其他地方调用
  • 这个界面是不支持在扫码界面做自定义界面功能的。解决方案如下: 1.使用系统相机camera,客户端6.7.3以上支持相机识别二维码功能 2.将系统相机的应用模式mode改为scanCode就是支持二维码了 3.给相机设置...
  • important 才能生效 属性列表 属性 类型 默认 必填 说明 value String/Array 否 组件的值,可以String(用“,”隔开)或者Array max Number 1 否 允许上传的最多张数 source Number -1 否 图片来源 1=相册,2=相机,-...
  • 1)1张图片适配,通过动态设置image宽高来实现:先在data中用变量表示图标初始宽高,并绑定到image组件上;再通过wx.getSystemInfo获取屏幕宽度,那么图标的宽度=原宽*屏宽/设计图宽,长=原长*屏宽/设计图宽,再...
  • CameraContext 微信小程序摄像头拍摄演示
  • 微信小程序自定义左上角胶囊样式

    千次阅读 2020-12-25 11:16:27
    1、 将app.js 中的 window 对象属性navigationStyle 改为自定义 "window": { "navigationStyle": "custom" }, 改完之后的效果: 2、获取 右上角胶囊的定位信息 设置 调用 wx.getMenuButtonBoundingClientRect()...
  • 在手机相册里选择图片没问题 使用照相机就出现了闪退 是不是照相机的图片太大了 求大神指导
  • ios中自定义相机We’ve all seen custom cameras in one form or another in iOS, but how can we make one ourselves? 我们都曾经在iOS中以一种或另一种形式看到过自定义相机,但是我们如何自己制作一个? This ...
  • 本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一)、功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片。 其他要点:textarea使用,...
  • 微信小程序Camera相机地址 我们看下效果: 1、首先生成一个CanvasContext: /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx....
  • 二维码 水印相机

    2018-11-12 23:48:58
    二维码 水印相机 [注:本内容来自网络,在此分享仅为帮助有需要的网友,如果侵犯了您的权利,麻烦联系我,我会第一时间删除,谢谢您。]
  • uni-app自定义相机

    千次阅读 2020-06-11 15:57:20
    调用camera相机组件,用cover-view,cover-image标签添加自定义页面布局,拍完照之后将照片画到canvas里面,然后用canvasToTempFilePath方法导出需要的图片。 html部分 <camera device-position="back" ...
  • 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到...
  • 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style=margin:30rpx; bindtap=chooseimage>获取图片</button> ...
  • { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) less文件 .pestsInterrogation-page { // 自定义拍照区样式 ....
  • 这是一款非常类似腾讯水印相机应用源码,该应用的功能很强大,跟腾讯水印相机的功能差不多,是一款非常不错的拍照应用。 应用介绍: 水印相机是国内首款智能水印相机,丰富的模版,新颖的玩法,给照片刻上时光足迹...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,070
精华内容 5,628
关键字:

小程序自定义相机