@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/ui-fireui copy/components/u-picture-cropper/u-picture-cropper.vue

@@ -1,682 +0,0 @@
-<template>
-  <view class="up-container" @touchmove.stop.prevent="stop">
-    <view
-      class="up-image-cropper"
-      :change:prop="parse.propsChange"
-      :prop="props"
-      :data-lockRatio="lockRatio"
-      :data-lockWidth="lockWidth"
-      :data-lockHeight="lockHeight"
-      :data-maxWidth="maxWidth"
-      :data-minWidth="minWidth"
-      :data-maxHeight="maxHeight"
-      :data-minHeight="minHeight"
-      :data-width="width"
-      :data-height="height"
-      :data-limitMove="limitMove"
-      :data-windowHeight="sysInfo.windowHeight || 600"
-      :data-windowWidth="sysInfo.windowWidth || 400"
-      :data-imgTop="imgTop"
-      :data-imgLeft="imgLeft"
-      :data-imgWidth="imgWidth"
-      :data-imgHeight="imgHeight"
-      :data-angle="angle"
-      @touchend.stop="parse.cutTouchEnd"
-      @touchstart.stop="parse.cutTouchStart"
-      @touchmove.stop="parse.cutTouchMove"
-    >
-      <view class="up-content">
-        <view class="up-content-top up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
-        <view class="up-content-middle">
-          <view class="up-bg-transparent up-wxs-bg" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
-          <view
-            class="up-cropper-box"
-            :style="{ borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }"
-          >
-            <view
-              v-for="(item, index) in 4"
-              :key="index"
-              class="up-edge"
-              :class="[`up-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
-              :style="{
-                width: edgeWidth,
-                height: edgeWidth,
-                borderColor: edgeColor,
-                borderWidth: edgeBorderWidth,
-                left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
-                right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
-                top: index < 2 ? `-${edgeOffsets}` : 'auto',
-                bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
-              }"
-            ></view>
-          </view>
-          <view class="up-flex-auto up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
-        </view>
-        <view class="up-flex-auto up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
-      </view>
-      <image
-        @load="imageLoad"
-        @error="imageLoad"
-        @touchstart.stop="parse.touchstart"
-        @touchmove.stop="parse.touchmove"
-        @touchend.stop="parse.touchend"
-        :data-minScale="minScale"
-        :data-maxScale="maxScale"
-        :data-disableRotate="disableRotate"
-        :style="{
-          width: imgWidth ? imgWidth + 'px' : 'auto',
-          height: imgHeight ? imgHeight + 'px' : 'auto',
-          transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
-        }"
-        class="up-cropper-image"
-        :src="imageUrl"
-        v-if="imageUrl"
-        mode="widthFix"
-      ></image>
-    </view>
-    <canvas
-      canvas-id="up-image-cropper"
-      id="up-image-cropper"
-      :disable-scroll="true"
-      :style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
-      class="up-cropper-canvas"
-    ></canvas>
-    <view class="up-cropper-tabbar" v-if="!custom">
-      <view class="up-op-btn" @tap.stop="back">取消</view>
-      <image :src="rotateImg" class="up-rotate-img" @tap="setAngle"></image>
-      <view class="up-op-btn" @tap.stop="getImage">完成</view>
-    </view>
-  </view>
-</template>
-<script src="./up-picture-cropper.wxs" module="parse" lang="wxs"></script>
-<script>
-/**
- * 注意：组件中使用的图片地址，将文件复制到自己项目中
- * 如果图片位置与组件同级，编译成小程序时图片会丢失
- * 拷贝static下整个components文件夹
- *也可直接转成base64（不建议）
- * */
-export default {
-  name: 'fuiPictureCropper',
-  props: {
-    //图片路径
-    imageUrl: {
-      type: String,
-      default: ''
-    },
-    /*
-					 默认正方形，可修改大小控制比例
-					 裁剪框高度 px
-					*/
-    height: {
-      type: Number,
-      default: 280
-    },
-    //裁剪框宽度 px
-    width: {
-      type: Number,
-      default: 280
-    },
-    //裁剪框最小宽度 px
-    minWidth: {
-      type: Number,
-      default: 100
-    },
-    //裁剪框最小高度 px
-    minHeight: {
-      type: Number,
-      default: 100
-    },
-    //裁剪框最大宽度 px
-    maxWidth: {
-      type: Number,
-      default: 360
-    },
-    //裁剪框最大高度 px
-    maxHeight: {
-      type: Number,
-      default: 360
-    },
-    //裁剪框border颜色
-    borderColor: {
-      type: String,
-      default: 'rgba(255,255,255,0.1)'
-    },
-    //裁剪框边缘线颜色
-    edgeColor: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    //裁剪框边缘线宽度 w=h
-    edgeWidth: {
-      type: String,
-      default: '34rpx'
-    },
-    //裁剪框边缘线border宽度
-    edgeBorderWidth: {
-      type: String,
-      default: '6rpx'
-    },
-    //偏移距离，根据edgeBorderWidth进行调整
-    edgeOffsets: {
-      type: String,
-      default: '6rpx'
-    },
-    /**
-     * 如果宽度和高度都为true则裁剪框禁止拖动
-     * 裁剪框宽度锁定
-     */
-    lockWidth: {
-      type: Boolean,
-      default: false
-    },
-    //裁剪框高度锁定
-    lockHeight: {
-      type: Boolean,
-      default: false
-    },
-    //锁定裁剪框比例（放大或缩小）
-    lockRatio: {
-      type: Boolean,
-      default: false
-    },
-    //生成的图片尺寸相对剪裁框的比例
-    scaleRatio: {
-      type: Number,
-      default: 2
-    },
-    //图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
-    quality: {
-      type: Number,
-      default: 0.8
-    },
-    //图片旋转角度
-    rotateAngle: {
-      type: Number,
-      default: 0
-    },
-    //图片最小缩放比
-    minScale: {
-      type: Number,
-      default: 0.5
-    },
-    //图片最大缩放比
-    maxScale: {
-      type: Number,
-      default: 2
-    },
-    //是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
-    disableRotate: {
-      type: Boolean,
-      default: true
-    },
-    //是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
-    limitMove: {
-      type: Boolean,
-      default: true
-    },
-    //自定义操作栏（为true时隐藏底部操作栏）
-    custom: {
-      type: Boolean,
-      default: false
-    },
-    //值发生改变开始裁剪（custom为true时生效）
-    startCutting: {
-      type: [Number, Boolean],
-      default: 0
-    },
-    /**
-     * 是否返回base64(H5端默认base64)
-     * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
-     **/
-    isBase64: {
-      type: Boolean,
-      default: false
-    },
-    //裁剪时是否显示loadding
-    loadding: {
-      type: Boolean,
-      default: true
-    },
-    //旋转icon
-    rotateImg: {
-      type: String,
-      default: '/static/components/cropper/img_rotate.png'
-    }
-  },
-  data() {
-    return {
-      TIME_CUT_CENTER: null,
-      CROPPER_WIDTH: 200, //裁剪框宽
-      CROPPER_HEIGHT: 200, //裁剪框高
-      cutX: 0, //画布x轴起点
-      cutY: 0, //画布y轴起点0
-      canvasWidth: 0,
-      canvasHeight: 0,
-      imgWidth: 0, //图片宽度
-      imgHeight: 0, //图片高度
-      scale: 1, //图片缩放比
-      angle: 0, //图片旋转角度
-      cutAnimation: false, //是否开启图片和裁剪框过渡
-      cutAnimationTime: null,
-      imgTop: 0, //图片上边距
-      imgLeft: 0, //图片左边距
-      ctx: null,
-      sysInfo: {},
-      props: '',
-      sizeChange: 0, //2
-      angleChange: 0, //3
-      resetChange: 0, //4
-      centerChange: 0 //5
-    };
-  },
-  watch: {
-    //定义变量然后利用change触发
-    imageUrl(val, oldVal) {
-      this.imageReset();
-      this.showLoading();
-      uni.getImageInfo({
-        src: val,
-        success: (res) => {
-          //计算图片尺寸
-          this.imgComputeSize(res.width, res.height);
-          if (this.limitMove) {
-            this.angleChange++;
-            this.props = `3,${this.angleChange}`;
-          }
-        },
-        fail: (err) => {
-          this.imgComputeSize();
-          if (this.limitMove) {
-            this.angleChange++;
-            this.props = `3,${this.angleChange}`;
-          }
-        }
-      });
-    },
-    rotateAngle(val) {
-      this.cutAnimation = true;
-      this.angle = val;
-      this.angleChanged(val);
-    },
-    cutAnimation(val) {
-      //开启过渡260毫秒之后自动关闭
-      clearTimeout(this.cutAnimationTime);
-      if (val) {
-        this.cutAnimationTime = setTimeout(() => {
-          this.cutAnimation = false;
-        }, 260);
-      }
-    },
-    limitMove(val) {
-      if (val) {
-        this.angleChanged(this.angle);
-      }
-    },
-    startCutting(val) {
-      if (this.custom && val) {
-        this.getImage();
-      }
-    }
-  },
-  mounted() {
-    this.sysInfo = uni.getSystemInfoSync();
-    this.imgTop = this.sysInfo.windowHeight / 2;
-    this.imgLeft = this.sysInfo.windowWidth / 2;
-    this.CROPPER_WIDTH = this.width;
-    this.CROPPER_HEIGHT = this.height;
-    this.canvasHeight = this.height;
-    this.canvasWidth = this.width;
-    this.ctx = uni.createCanvasContext('up-image-cropper', this);
-    //初始化
-    setTimeout(() => {
-      this.props = '1,1';
-    }, 0);
-    setTimeout(() => {
-      this.$emit('ready', {});
-    }, 200);
-  },
-  methods: {
-    //返回裁剪后图片信息
-    getImage() {
-      if (!this.imageUrl) {
-        uni.showToast({
-          title: '请选择图片',
-          icon: 'none'
-        });
-        return;
-      }
-      this.loadding && this.showLoading();
-      let draw = () => {
-        //图片实际大小
-        let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
-        let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
-        //canvas和图片的相对距离
-        let xpos = this.imgLeft - this.cutX;
-        let ypos = this.imgTop - this.cutY;
-        //旋转画布
-        this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
-        this.ctx.rotate((this.angle * Math.PI) / 180);
-        this.ctx.drawImage(this.imageUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
-        this.ctx.draw(false, () => {
-          let params = {
-            width: this.canvasWidth * this.scaleRatio,
-            height: Math.round(this.canvasHeight * this.scaleRatio),
-            destWidth: this.canvasWidth * this.scaleRatio,
-            destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
-            fileType: 'png',
-            quality: this.quality
-          };
-          let data = {
-            url: '',
-            base64: '',
-            width: this.canvasWidth * this.scaleRatio,
-            height: this.canvasHeight * this.scaleRatio
-          };
-          // #ifdef MP-ALIPAY
-
-          if (this.isBase64) {
-            this.ctx.toDataURL(params).then((dataURL) => {
-              data.base64 = dataURL;
-              this.loadding && uni.hideLoading();
-              this.$emit('cropper', data);
-            });
-          } else {
-            this.ctx.toTempFilePath({
-              ...params,
-              success: (res) => {
-                data.url = res.tempFilePath;
-                this.loadding && uni.hideLoading();
-                this.$emit('cropper', data);
-              }
-            });
-          }
-          // #endif
-
-          // #ifndef MP-ALIPAY
-          // #ifdef MP-BAIDU || MP-TOUTIAO || H5
-          this.isBase64 = false;
-          // #endif
-          if (this.isBase64) {
-            uni.canvasGetImageData({
-              canvasId: 'up-image-cropper',
-              x: 0,
-              y: 0,
-              width: this.canvasWidth * this.scaleRatio,
-              height: Math.round(this.canvasHeight * this.scaleRatio),
-              success: (res) => {
-                const arrayBuffer = new Uint8Array(res.data);
-                const base64 = uni.arrayBufferToBase64(arrayBuffer);
-                data.base64 = base64;
-                this.loadding && uni.hideLoading();
-                this.$emit('cropper', data);
-              }
-            });
-          } else {
-            uni.canvasToTempFilePath(
-              {
-                ...params,
-                canvasId: 'up-image-cropper',
-                success: (res) => {
-                  data.url = res.tempFilePath;
-                  // #ifdef H5
-                  data.base64 = res.tempFilePath;
-                  // #endif
-                  this.loadding && uni.hideLoading();
-                  this.$emit('cropper', data);
-                },
-                fail(res) {
-                  console.log(res);
-                }
-              },
-              this
-            );
-          }
-          // #endif
-        });
-      };
-      if (this.CROPPER_WIDTH != this.canvasWidth || this.CROPPER_HEIGHT != this.canvasHeight) {
-        this.CROPPER_WIDTH = this.canvasWidth;
-        this.CROPPER_HEIGHT = this.canvasHeight;
-        this.$nextTick(() => {
-          this.ctx.draw();
-          setTimeout(() => {
-            draw();
-          }, 100);
-        });
-      } else {
-        draw();
-      }
-    },
-    change(e) {
-      this.cutX = e.cutX || 0;
-      this.cutY = e.cutY || 0;
-      this.canvasWidth = e.canvasWidth || 100;
-      this.canvasHeight = e.canvasHeight || 100;
-      this.imgWidth = e.imgWidth || 100;
-      this.imgHeight = e.imgHeight || 100;
-      this.scale = e.scale || 1;
-      this.angle = e.angle || 0;
-      this.imgTop = e.imgTop || 0;
-      this.imgLeft = e.imgLeft || 0;
-    },
-    imageReset() {
-      this.scale = 1;
-      this.angle = 0;
-      let sys = this.sysInfo.windowHeight || uni.getSystemInfoSync();
-      this.imgTop = sys.windowHeight / 2;
-      this.imgLeft = sys.windowWidth / 2;
-      this.resetChange++;
-      this.props = `4,${this.resetChange}`;
-      //初始化旋转角度 0deg
-      this.$emit('initAngle', {});
-    },
-    imageLoad(e) {
-      this.imageReset();
-      uni.hideLoading();
-      this.$emit('imageLoad', {});
-    },
-
-    imgComputeSize(width, height) {
-      //默认按图片最小边 = 对应裁剪框尺寸
-      let imgWidth = width,
-        imgHeight = height;
-      if (imgWidth && imgHeight) {
-        if (imgWidth / imgHeight > this.width / this.height) {
-          imgHeight = this.height;
-          imgWidth = (width / height) * imgHeight;
-        } else {
-          imgWidth = this.width;
-          imgHeight = (height / width) * imgWidth;
-        }
-      } else {
-        let sys = this.sysInfo || uni.getSystemInfoSync();
-        imgWidth = sys.windowWidth;
-        imgHeight = 0;
-      }
-      this.imgWidth = imgWidth;
-      this.imgHeight = imgHeight;
-      this.sizeChange++;
-      this.props = `2,${this.sizeChange}`;
-    },
-    moveStop() {
-      clearTimeout(this.TIME_CUT_CENTER);
-      this.TIME_CUT_CENTER = setTimeout(() => {
-        if (!this.cutAnimation) {
-          this.cutAnimation = true;
-        }
-        this.centerChange++;
-        this.props = `5,${this.centerChange}`;
-      }, 666);
-    },
-    moveDuring() {
-      clearTimeout(this.TIME_CUT_CENTER);
-    },
-    showLoading() {
-      uni.showLoading({
-        title: '请稍候...',
-        mask: true
-      });
-    },
-    stop() {},
-    back() {
-      uni.navigateBack();
-    },
-    angleChanged(val) {
-      this.moveStop();
-      if (this.limitMove && val % 90) {
-        this.angle = Math.round(val / 90) * 90;
-      }
-      this.angleChange++;
-      this.props = `3,${this.angleChange}`;
-    },
-    setAngle() {
-      this.cutAnimation = true;
-      this.angle = this.angle + 90;
-      this.angleChanged(this.angle);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.up-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.6);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.up-image-cropper {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-}
-
-.up-content {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  z-index: 9;
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.up-bg-transparent {
-  background-color: rgba(0, 0, 0, 0.6);
-  transition-duration: 0.3s;
-}
-
-.up-content-top {
-  pointer-events: none;
-}
-
-.up-content-middle {
-  width: 100%;
-  height: 200px;
-  display: flex;
-  box-sizing: border-box;
-}
-
-.up-cropper-box {
-  position: relative;
-  /* transition-duration: 0.2s; */
-  border-style: solid;
-  border-width: 1rpx;
-  box-sizing: border-box;
-}
-
-.up-flex-auto {
-  flex: auto;
-}
-
-.up-cropper-image {
-  width: 100%;
-  border-style: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  transform-origin: center;
-}
-
-.up-cropper-canvas {
-  position: fixed;
-  z-index: 10;
-  left: -2000px;
-  top: -2000px;
-  pointer-events: none;
-}
-
-.up-edge {
-  border-style: solid;
-  pointer-events: auto;
-  position: absolute;
-  box-sizing: border-box;
-}
-
-.up-top-left {
-  border-bottom-width: 0 !important;
-  border-right-width: 0 !important;
-}
-
-.up-top-right {
-  border-bottom-width: 0 !important;
-  border-left-width: 0 !important;
-}
-
-.up-bottom-left {
-  border-top-width: 0 !important;
-  border-right-width: 0 !important;
-}
-
-.up-bottom-right {
-  border-top-width: 0 !important;
-  border-left-width: 0 !important;
-}
-
-.up-cropper-tabbar {
-  width: 100%;
-  height: 120rpx;
-  padding: 0 40rpx;
-  box-sizing: border-box;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #ffffff;
-  font-size: 32rpx;
-}
-
-.up-cropper-tabbar::after {
-  content: ' ';
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-  -webkit-transform: scaleY(0.5) translateZ(0);
-  transform: scaleY(0.5) translateZ(0);
-  transform-origin: 0 100%;
-}
-
-.up-op-btn {
-  height: 80rpx;
-  display: flex;
-  align-items: center;
-}
-
-.up-rotate-img {
-  width: 44rpx;
-  height: 44rpx;
-}
-</style>