在微信小程序中实现拍摄图片、压缩、预览、裁剪、上传的实现方案

最新更新时间：2019年2月1日14:18:12

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：小程序拍照上传

概述

• 引入第三方库：wx-plugin/image-cropper
• 拍照界面

<view class="container">
  <camera  device-position="back"  device-position="back" flash="{{flashFlag?'on':'off'}}" binderror="error" style="width: 100%;  bottom:120rpx;">
  </camera>
  <view class='camera-btn' bindtap='takeCamera'>
    <image src='/images/camera-btn-bg.png'></image>
  </view>
</view>

.container {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
}
.camera-btn {
  height: 120rpx;
  background: #60d0fe;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
}
.camera-btn image {
  display: block;
  width: 290rpx;
  height: 120rpx;
}
.back {
  position: absolute;
  z-index: 10;
  top: 20rpx;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  padding: 25rpx;
}
camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 100rpx;
  z-index: 1;
}
.btn-box {
  position: absolute;
  bottom: 20rpx;
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
}
.btn-box .btn {
  width: 188rpx;
  height: 188rpx;
  line-height: 188rpx;
  overflow: hidden;
  font-size: 50rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

this.data.CameraContext = wx.createCameraContext()
takeCamera() {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting["scope.camera"]) {
          this.data.CameraContext.takePhoto({
            quality: "normal",
            success: (res) => {
	            wx.navigateTo({url: `../editor/index?path=${res.tempImagePath}`})
            },
            fail: () => {}
          })
        } else {
          wx.openSetting({
            success(res) {
              wx.navigateBack({
                delta: 1
              })
            }
          })
        }
      }
    })
  }

• 编辑界面

{
  "usingComponents": {
    "image-cropper": "/componts/imageCropper/image-cropper"
  },
    "navigationBarTitleText": ""
}

<view class="container">
  <view class='img-box'>
    <image-cropper quality="0.8" width="300" height="300" max_height="400" max_width="300" img_width="100%" id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" imgSrc="{{src}}"></image-cropper>
  </view>
  <view class='btn-box'>
    <image src='/images/editor-cancel-btn.png' class='item' bindtap='goback'>退出</image>
    <image src='/images/editor-right-btn.png' class='item' bindtap='submit1'>剪裁</image>
    <image src='/images/editor-rotate-btn.png' class='item' bindtap='rotateLeft'>左旋转</image>
  </view>
</view>

.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hint-tip {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  color: #b8b8b8;
  font-size: 22rpx;
  z-index: 2;
  padding: 20rpx 40rpx;
}
.img-box {
  width: 100%;
  /* background: red; */
  flex-grow: 1;
}
.btn-box {
  height: 10vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 24rpx;
}
.btn-box .item {
  width: 46rpx;
  height: 44rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
}

this.setData({src: options.path})
rotateL() {
	this.cropper.setAngle(this.cropper.data.angle -= 90);
}
rotateR() {
	this.cropper.setAngle(this.cropper.data.angle += 90);
}
submit() {
	this.cropper.getImg((obj) => {
		let base64 = wx.getFileSystemManager().readFileSync(obj.url, "base64")
	});
}

参考资料

• 无

感谢阅读，欢迎评论^-^

打赏我吧^-^