uni-app图片裁剪按照16:9或者9:16尺寸裁剪

1、引入组件

npm install vue-cropper-h5
or
yarn add vue-cropper-h5
or
cnpm install vue-cropper-h5

2、在需要的引入裁剪功能的页面引入组件

<1>html

<!-- 裁剪组件 -->
    <div class="cropperh5">
      <cropperh5
        ref="cropper"
        hide-input
        :option="option"
        @getFile="getFile"
      ></cropperh5>
    </div>

<2>js

引入下边是静态引入的方式

import cropperh5 from "../../../components/uni-cropper/cropper-h5";

<3>相关的属性设置

export default {
  components: {
    cropperh5,
  },
  data() {
    return {
      option: {//裁剪各个属性的设置 具体参数说明参照cropper.js组件介绍
        info: true,
        fixed: true,
        fixedNumber: [9, 16],//照片的比例 
        fixedBox: false,
        canMoveBox: true,
        confirmButtonBackgroundColor: "#90ba21",
      },
    };
  },
}
 

<4>相机设置（需求要求只能是相机不能从相机选择照片）

uni.chooseImage({
        count: 1,
        sizeType: ["original"],//原图
        sourceType: ["camera"],//设置只能从相机选择照片
        success: function (result) {
          var blob = result.tempFilePaths[0];
          console.log(blob);
          that.beginUploadImageIfNeed(blob);
        },
        fail: function (error) {
          uni.showToast({
            title: "获取图片失败",
            duration: 1500,
          });
        },
      });

<5>完整代码

<template>
  <view class="content uni-padding-wrap uni-common-mt">
    <!-- 裁剪组件 -->
    <div class="cropperh5">
      <cropperh5
        ref="cropper"
        hide-input
        :option="option"
        @getFile="getFile"
      ></cropperh5>
    </div>

    <div class="cropperFront" @click="hanldeCamera('0006')">
      <button class="bt_update btn">上传身份证人像面</button>
    </div>

    <div class="cropperBack" @click="hanldeCamera('0006')">
      <image :src="imgFront" class="img-pre" />
    </div>

    <div class="cropperFront" @click="hanldeCamera('0007')">
      <button class="bt_update btn">上传身份证国徽面</button>
    </div>

    <div class="cropperBack" @click="hanldeCamera('0007')">
      <image :src="imgBack" class="img-pre" />
    </div>

    <view style="text-align: center"
      >请按照样例图拍照，拍照前先设置相机像素＞48万、相机长宽比为16:9。</view
    >
    <button type="primary" @click="doNext">下一步</button>
    <view style="height: 60upx"></view>
  </view>
</template>

<script>
import cropperh5 from "../../../components/uni-cropper/cropper-h5";

export default {
  components: {
    cropperh5,
  },
  data() {
    return {
      cardFrontFlag: false, //是否上传了正面
      cardBackFlag: false, //是否上传了反面
      openId: "",
      option: {
        info: true,
        fixed: true,
        fixedNumber: [9, 16],
        fixedBox: false,
        canMoveBox: true,
        confirmButtonBackgroundColor: "#90ba21",
      },
      curOptionType: "",
      imgFront: "../../../static/idcard_front.jpg",
      imgBack: "../../../static/idcard_back.jpg",
    };
  },
  onLoad: function (options) {
    try {
      //从缓存中获取openId
    //   this.openId = "asd2020062810421263542802";
      this.openId = uni.getStorageSync("openId");
    } catch (e) {
      //TODO handle the exception
    }
    if (options.cardCode != undefined) {
      this.cutCallBack();
    }
  },
  //返回逻辑
  onBackPress(options) {
    var backFrom = options.from;
    //backbutton是指Android 实体返回键；navigateBack是uni-app的uni.navigateBack()
    if (backFrom == "backButton" || backFrom == "navigateBack") {
      //自定义返回页面
      uni.redirectTo({
        url: "/pages/uyou/SelectSetMeal/SelectSetMeal",
      });
      //return true以上代码才会生效
      return true;
    }
  },
  methods: {
    hanldeCamera(type) {
      this.curOptionType = type;
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["original"],
        sourceType: ["camera"],
        success: function (result) {
          var blob = result.tempFilePaths[0];
          console.log(blob);
          that.beginUploadImageIfNeed(blob);
        },
        fail: function (error) {
          uni.showToast({
            title: "获取图片失败",
            duration: 1500,
          });
        },
      });
    },
    /**
     * 将以blob对象转为本地路径
     */
    getObjectURL(file) {
      let url = null;
      if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },

    getFile(data) {
      data = this.getObjectURL(data);
      console.log("curOptionType: ", this.curOptionType);
      console.log("-->blob: ", data);
      if (this.curOptionType == "0006") {
        this.imgFront = data; //剪切后预览正面
      } else {
        this.imgBack = data; //剪切后预览反面
      }
      this.uploadAndOCRCheck(this.curOptionType, data);
    },

    uploadAndOCRCheck(flag, data) {
      uni.showLoading({
        title: "正在上传图片...",
        mask: true,
      });
      var self = this;
        uni.uploadFile({
          url: self.baseUrl + "/api/NfcOpen/file/uploadIdCardAndCheckOCR",
          filePath: data, //blob格式文件放这里
          // file: data,
          fileType: "image",
          name: "file",
          formData: {
            openId: self.openId,
            code: flag, //身份证正反面标识，后台用于区分正反面：0006标识正面，0007标识反面
          },
          success: (res) => {
            uni.hideLoading();
            if (res.statusCode === 200) {
              var data = JSON.parse(res.data);
              var code = data.code;
              var msg = data.message;
              if (code == 0) {
                //操作成功，更新标识
                if (flag == "0006") {
                  self.cardFrontSrc = data;
                  self.cardFrontFlag = true;
                } else if (flag == "0007") {
                  self.cardBackSrc = data;
                  self.cardBackFlag = true;
                }
                uni.showToast({
                  title: "上传成功",
                  duration: 1500,
                });
              } else {
                //操作失败，更新标识
                if (flag == "0006") {
                  self.cardFrontSrc = "../../../static/idcard_front.jpg";
                  self.cardFrontFlag = false;
                } else if (flag == "0007") {
                  self.cardBackSrc = "../../../static/idcard_back.jpg";
                  self.cardBackFlag = false;
                }
                //弹出提示信息
                uni.showModal({
                  content: msg,
                  showCancel: false,
                  confirmText: "确定",
                });
              }
            } else {
              //请求未成功，弹出窗体，禁止跳转
              uni.showModal({
                content: "请求后台失败",
                showCancel: false,
                confirmText: "确定",
              });
              return false;
            }
          },
          fail: function (error) {
            uni.hideLoading();
            uni.showToast({
              title: "上传出错",
              icon: "none",
              duration: 2000,
            });
            return false;
          },
        });
    },

    //下一步
    doNext() {
      console.log(this.cardFrontFlag);
      // var self = this
      let msg = "";
      if (!this.cardFrontFlag) {
        msg = "身份证人像面未上传\n或身份证校验不通过";
      } else if (!this.cardBackFlag) {
        msg = "身份证国徽面未上传\n或身份证校验不通过";
      } else {
        uni.navigateTo({
          url: "/pages/uyou/NFCRecognition/NFCRecognition",
        });
        return;
      }
      uni.showModal({
        title: "警告",
        content: msg,
        showCancel: false,
      });
    },

    // 异步封装
    async beginUploadImageIfNeed(bloburl) {
      var file = await this.httpRequest(bloburl); //bloburl 格式 blob:null/73e6954e-58ee-4165-870b-03614f9e3b5f
      this.$refs.cropper.loadFile(file);
    },

    //blob文件转化
    httpRequest(src) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", src, true);
        xhr.responseType = "blob";
        xhr.onload = function (e) {
          if (this.status == 200) {
            let myBlob = this.response;
            let files = new window.File([myBlob], myBlob.type, {
              type: myBlob.type,
            }); // myBlob.type 自定义文件名
            resolve(files);
          } else {
            reject(false);
          }
        };
        xhr.send();
      });
    },
  },
};
</script>

<style>
uni-button:after {
  border: none;
}

uni-button {
  background: none;
}

.cropperh5 {
  width: 0;
  height: 0;
}

.cropperFront {
  width: 100%;
  height: 100upx;
  margin-top: 10upx;
  line-height: 100upx;
  /* 切记position: relative一定要有 */
  position: relative;
  /* left: 10%; */
  /* border-radius: 50%; */
  overflow: hidden;
  text-align: center;
}

.cropperBack {
  width: 100%;
  height: 400upx;
  line-height: 400upx;
  /* 切记position: relative一定要有 */
  position: relative;
  /* left: 10%; */
  margin-top: 20upx;
  /* border-radius: 50%; */
  overflow: hidden;
  text-align: center;
}

.bt_update {
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 10upx;
  left: 0;
  top: 0;
}

.img-pre {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>