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

「爱情、让人受尽委屈。」 2023-07-08 09:03 1阅读 0赞

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

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

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

#### 概述 ####

*  引入第三方库：[wx-plugin/image-cropper][wx-plugin_image-cropper]
 *  拍照界面

.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": ""
    }

.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")
    	});
    }

#### 参考资料 ####

*  无

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[wx-plugin_image-cropper]: https://github.com/wx-plugin/image-cropper
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460