vue-image-crop-upload icon indicating copy to clipboard operation
vue-image-crop-upload copied to clipboard

上传图片与设置的宽高比例相同时,修改部分源码

Open nowkizzz opened this issue 5 years ago • 0 comments
trafficstars

upload-2.vue image

image

若上传裁剪图片的width/height的与原图容器宽高的比例相同,主要修改原图蒙版属性 sourceImgMasking和原图遮罩样式sourceImgShadeStyle的代码

 // 原图蒙版属性
    sourceImgMasking() {
      let { width, height, ratio, sourceImgContainer } = this,
        sic = sourceImgContainer,
        sicRatio = sic.width / sic.height, // 原图容器宽高比
        x = 0,
        y = 0,
        w = sic.width,
        h = sic.height,
        scale = 1,
       // 添加是否相同比例开关
        isEqualRatio = false;
      if (ratio < sicRatio) {
        scale = sic.height / height;
        w = sic.height * ratio;
        x = (sic.width - w) / 2;
      }
      if (ratio > sicRatio) {
        scale = sic.width / width;
        h = sic.width / ratio;
        y = (sic.height - h) / 2;
      }
      // 比例相同的情况下  添加修改
      if (ratio === sicRatio) {
        isEqualRatio = true;
        scale = sic.height / height;
        w = sic.height * ratio;
        x = (sic.width - w) / 2;
      }
      return {
        scale, // 蒙版相对需求宽高的缩放
        x,
        y,
        width: w,
        height: h,
        isEqualRatio
      };
    },
// 原图遮罩样式
    sourceImgShadeStyle() {
      let { sourceImgMasking, sourceImgContainer } = this,
        sic = sourceImgContainer,
        sim = sourceImgMasking,
        w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
        h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
     // 添加相同比例时返回的遮罩的宽高为0
      if (sim.isEqualRatio) {
        return {
          width: '0px',
          height: '0px'
        };
      }
      return {
        width: w + 'px',
        height: h + 'px'
      };
    },

nowkizzz avatar Jun 23 '20 07:06 nowkizzz