扩展vue-cropper可设置可剪裁最小图片尺寸

302 阅读1分钟

在vue-cropper 的changeCropNow方法里nextTick模块,minSize传入最小宽高(我的需求是正方形,所以传一个number)

   this.$nextTick(() => {
          var fw = nowX - this.cropX;
          var fh = nowY - this.cropY;
          if (this.canChangeX) {
            if (this.changeCropTypeX === 1) {
              if ((this.cropOldW - fw) / this.scale < this.minSize) {
                this.cropW = this.minSize * this.scale;
              } else if (this.cropOldW - fw > 0) {
                this.cropW =
                  wrapperW - this.cropChangeX - fw <= wrapperW - minX
                    ? this.cropOldW - fw
                    : this.cropOldW + this.cropChangeX - minX;
                this.cropOffsertX =
                  wrapperW - this.cropChangeX - fw <= wrapperW - minX
                    ? this.cropChangeX + fw
                    : minX;
              } else {
                this.cropW =
                  Math.abs(fw) + this.cropChangeX <= wrapperW
                    ? Math.abs(fw) - this.cropOldW
                    : wrapperW - this.cropOldW - this.cropChangeX;
                this.cropOffsertX = this.cropChangeX + this.cropOldW;
              }
            } else if (this.changeCropTypeX === 2) {
              if ((this.cropOldW + fw) / this.scale < this.minSize) {
                this.cropW = this.minSize * this.scale;
                this.cropOffsertX = this.cropChangeX;
              } else if (this.cropOldW + fw > 0) {
                this.cropW =
                  this.cropOldW + fw + this.cropOffsertX <= wrapperW
                    ? this.cropOldW + fw
                    : wrapperW - this.cropOffsertX;
                this.cropOffsertX = this.cropChangeX;
              } else {
                // 右侧坐标抽 超过左侧
                this.cropW =
                  wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
                  wrapperW - minX
                    ? Math.abs(fw + this.cropOldW)
                    : this.cropChangeX - minX;
                this.cropOffsertX =
                  wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
                  wrapperW - minX
                    ? this.cropChangeX - Math.abs(fw + this.cropOldW)
                    : minX;
              }
            }
          }

          if (this.canChangeY) {
            if (this.changeCropTypeY === 1) {
              if ((this.cropOldH - fh) / this.scale < this.minSize) {
                this.cropH = this.minSize * this.scale;
              } else if (this.cropOldH - fh > 0) {
                this.cropH =
                  wrapperH - this.cropChangeY - fh <= wrapperH - minY
                    ? this.cropOldH - fh
                    : this.cropOldH + this.cropChangeY - minY;
                this.cropOffsertY =
                  wrapperH - this.cropChangeY - fh <= wrapperH - minY
                    ? this.cropChangeY + fh
                    : minY;
              } else {
                this.cropH =
                  Math.abs(fh) + this.cropChangeY <= wrapperH
                    ? Math.abs(fh) - this.cropOldH
                    : wrapperH - this.cropOldH - this.cropChangeY;
                this.cropOffsertY = this.cropChangeY + this.cropOldH;
              }
            } else if (this.changeCropTypeY === 2) {
              if ((this.cropOldH + fh) / this.scale < this.minSize) {
                this.cropH = this.minSize * this.scale;
              } else if (this.cropOldH + fh > 0) {
                this.cropH =
                  this.cropOldH + fh + this.cropOffsertY <= wrapperH
                    ? this.cropOldH + fh
                    : wrapperH - this.cropOffsertY;
                this.cropOffsertY = this.cropChangeY;
              } else {
                this.cropH =
                  wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
                  wrapperH - minY
                    ? Math.abs(fh + this.cropOldH)
                    : this.cropChangeY - minY;
                this.cropOffsertY =
                  wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
                  wrapperH - minY
                    ? this.cropChangeY - Math.abs(fh + this.cropOldH)
                    : minY;
              }
            }
          }

          if (this.canChangeX && this.fixed) {
            var fixedHeight =
              (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
            if (fixedHeight + this.cropOffsertY > wrapperH) {
              this.cropH = wrapperH - this.cropOffsertY;
              this.cropW =
                (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
            } else {
              this.cropH = fixedHeight;
            }
          }

          if (this.canChangeY && this.fixed) {
            var fixedWidth =
              (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
            if (fixedWidth + this.cropOffsertX > wrapperW) {
              this.cropW = wrapperW - this.cropOffsertX;
              this.cropH =
                (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
            } else {
              this.cropW = fixedWidth;
            }
          }
        });