微信小程序实现拍照画布指定区域生成图片

网络编程 2024/11/16 佚名

3 1 2

最近写识别行驶证功能，点击拍照把指定区域截取，生成图片功能。

系统相机。该组件是原生组件，使用时请注意相关限制。扫码二维码功能，需升级微信客户端至6.7.3。

微信小程序Camera相机地址

我们看下效果：

1、首先生成一个CanvasContext：

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 requireJs.adaptionIphoneX(this);
 
 this.ctx = wx.createCameraContext()
 
 },

2、相机的 wxml样式

<camera wx:if='{{isShowCamera}}' device - position="width" flash="off" style="width:{{windowWidth}}px; height:{{windowHeight}}px;">
 
 <cover-view class='camerabgImage-view'>
  <cover-image class='bgImage' src='{{isIphoneX==true"../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}'> </cover-image>
 
  <cover-view class='cameratop-view1'>中华人民共和国机动车行驶证</cover-view>
  <cover-view class='cameratop-view2'>（行驶证主页）</cover-view>
  <cover-view class='cameracenter-view' style='top:{{isIphoneX==true"52%":"62%"}}'>请对准左下角发证机关印章</cover-view>
 
  <!-- 拍照按钮 --> 
  <cover-view class='camerabotton-view' style='bottom:{{isIphoneX==true"75px":"0px"}}'>
  <cover-image class='cancelphoto' src='../../myImage/vehicle/quxiao.png' bindtap='cancelPhotoAction'></cover-image>
  <cover-image class='takephoto' src='../../myImage/vehicle/paizhao.png' bindtap='takePhotoAction'></cover-image>
  
  <cover-view class='skipphoto' bindtap='skipphotoAction'>{{skipphotoStatus==1"跳过":""}}
  </cover-view>
  
  </cover-view>
 
 </cover-view>
 
 </camera>
 
 <canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>

3、相机的 wxss样式

.camerabgImage-view{
 height: 100%;
 width: 100%;
 position:absolute;
}
.bgImage{
 width: 100%;
 height: 100%;
 position: absolute;
}
 
.cameratop-view1{
 margin-top: 174rpx;
}
.cameratop-view2{
 margin-top: 220rpx;
}
.cameratop-view1, .cameratop-view2{
 width: 100%;
 display: flex;
 justify-content: center;
 position: absolute;
 
 font-family: PingFangSC-Medium;
 font-size: 36rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
}
 
.cameracenter-view{
 height: 44rpx;
 width: 100%;
 position: absolute;
 
 font-family: PingFangSC-Medium;
 font-size: 32rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
}
 
/* 底部 */
.camerabotton-view{
 height: 200rpx;
 width: 100%;
 position:absolute;
 
 display: flex;
 justify-content: space-around;
 align-items: center;
}
.cancelphoto{
 width: 50rpx;
 height: 50rpx;
}
.takephoto{
 width: 132rpx;
 height: 132rpx;
}
.skipphoto{
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
}

4、js 中访问原生组件 camera 主要针对相机权限处理

微信小程序权限地址

onShow: function() {
 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.redirectTo({
      url: 'addCarInfo/addCarInfo',
     })
     }
    }
    })
   } else { //取消
    wx.showToast({
    title: '授权失败',
    icon: 'none',
    duration: 1000
    })
    wx.redirectTo({
    url: 'addCarInfo/addCarInfo',
    })
   }
   }
  })
 
  }
 })
 },

5、页面初始化数据

/**
 * 页面的初始数据
 */
 data: {
 isShowCamera: false,
 width: 10,
 height: 10,
 src: "",
 image: "",
 skipphotoStatus: "0",// 1跳过 0没有跳过
 isShowImage: false
 },

6、点击拍照设置照片，返回拍照图片

/**
 * 拍照
 */
 takePhotoAction: function() {
 var that = this
 that.ctx.takePhoto({
  quality: 'high', //高质量
  success: (res) => {
  this.loadTempImagePath(res.tempImagePath);
  },
 })
 },

7、针对原图片截取尺寸与截取后的图片

 loadTempImagePath: function(options) {
 var that = this
 that.path = options
 wx.getSystemInfo({
  success: function(res) {
 
  // 矩形的位置
  var image_x = 15;
  var image_y = 150;
  var image_width = that.data.width - 2 * 15;
  var image_height = 238;
 
  wx.getImageInfo({
   src: that.path,
   success: function(res) {
   that.setData({
    isShowImage: true,
   })
   that.canvas = wx.createCanvasContext("image-canvas", that)
   //过渡页面中，图片的路径坐标和大小
   that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
   wx.showLoading({
    title: '数据处理中...',
    icon: 'loading',
    duration: 10000
   })
   // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定
   that.canvas.setStrokeStyle('black')
   that.canvas.strokeRect(image_x, image_y, image_width, image_height)
   that.canvas.draw()
   setTimeout(function() {
    wx.canvasToTempFilePath({ //裁剪对参数
    canvasId: "image-canvas",
    x: image_x, //画布x轴起点
    y: image_y, //画布y轴起点
    width: image_width, //画布宽度
    height: image_height, //画布高度
    destWidth: image_width, //输出图片宽度
    destHeight: image_height, //输出图片高度
    success: function(res) {
     that.setData({
     image: res.tempFilePath,
     })
     //清除画布上在该矩形区域内的内容。
     // that.canvas.clearRect(0, 0, that.data.width, that.data.height)
     // that.canvas.drawImage(res.tempFilePath, image_x, image_y, image_width, image_height)
     // that.canvas.draw()
     wx.hideLoading()
 
     console.log(res.tempFilePath);
     //在此可进行网络请求
     PublicJS.drivinglicenseUpload(res.tempFilePath, that.uploadFile);
    },
    fail: function(e) {
     wx.hideLoading()
     wx.showToast({
     title: '出错啦...',
     icon: 'loading'
     })
     if (this.data.skipphotoStatus == 1) {
     wx.redirectTo({
      url: 'addCarInfo/addCarInfo',
     })
     } else {
     wx.navigateBack({
      delta: 1
     });
     }
    }
    });
   }, 1000);
   }
  })
  }
 })
 },
 
// 接口返回结果
 
uploadFile: function(data) {}

微信小程序Canvas画布地址

1.canvas组件是由客户端创建的原生组件，它的层级是最高的。

2.请勿在scroll-view中使用canvas组件。

3.css动画对canvas组件无效。

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

微信小程序拍照画布指定区域生成图片,微信小程序指定区域生成图片,微信小程序拍照区域生成图片

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“微信小程序实现拍照画布指定区域生成图片”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

微信小程序实现拍照画布指定区域生成图片

基于JS实现数字动态变化显示效果附源码

vue使用video.js进行视频播放功能

评论“微信小程序实现拍照画布指定区域生成图片”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

微信小程序实现拍照画布指定区域生成图片

基于JS实现数字动态变化显示效果附源码

vue使用video.js进行视频播放功能

评论“微信小程序实现拍照画布指定区域生成图片”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存