vue-image-crop Vue 기반 모 바 일 이미지 재단 구성 요소 예제

본 고 는 vue-image-crop 이 Vue 를 바탕 으로 하 는 모 바 일 이미지 재단 구성 요소 의 예 시 를 소개 하고 구체 적 으로 다음 과 같다.
코드 주소:https://github.com/jczzq/vue-image-crop
vue-image-crop
Vue 기반 모 바 일 이미지 재단 구성 요소
구성 요 소 는 URL.createObjectURL() 등 새로운 기능 을 사용 합 니 다.사용 하기 전에 호 환 문 제 를 주의 하 십시오.IE >= 10
메모:이 구성 요 소 는 PC 쪽 에 적용 되 며 휴대 전화 쪽 에서 사용 하 는 것 을 추천 하지 않 습 니 다.
기능 미리보기


빠 른 시작
설치 노드>=8.9.0(추천 LTS=8.11.0)

#    vue-cli 3.x
npm install -g @vue/cli

cd vue-image-crop
npm install
npm run dev

개발 모드 를 시작 하면 맞 춤 형 기능 을 할 수 있다.
세우다

npm run build

build 이후 lib 폴 더 를 다시 생 성 합 니 다.
API
props
속성 명
유형
기본 값
설명 하 다.
value
Object
{}
재단 한 그림 대상;필전v-model 바 인 딩 사용 가능
proportion
Object
{ w: 2, h: 1 }
그림 너비 와 높이 비례 대상;필 전동적 계산 너비 비례 에 사용 되 기 때문에 w 와 h 두 속성 은 고정 값 이 없습니다.
quality
Number
0.92
선명 도필 전HTMLCanvasElement.toDataURL() 의 두 번 째 매개 변수
hasRemove
Boolean
false
제거 단 추 를 표시 할 지 여부;필 전이 가능 하 다,~할 수 있다,...
skipCrop
Boolean
false
직접 업로드 할 지 여부;필 전트 루 로 설정 할 때 그림 은 자 르 지 않 고 바로 돌아 갑 니 다.
config
Object
{ size: 1200, isSlice: true, path: null }
대상 설정 하기;이 대상 은 기본 값 을 전달 하지 않 습 니 다.전송 할 때 대상 의 모든 속성 을 전달 해 야 합 니 다.size:그림 최대 너비(px),isSlice:재단 이 필요 한 지 여부,path:그림 을 표시 할 때의 경로,path 매개 변 수 는 그림 id 와 직접 연결 합 니 다(path+id)
events
이벤트 이름
설명 하 다.
리 턴 매개 변수
remove
제거 버튼 이 눌 렸 을 때 터치
-
change
선택 한 그림 변경 시 터치
event.target.files[0],새 파일
submit
그림 작업 완료 시 터치
현재 재단 한 그림 대상
cancel
그림 작업 취소 시 터치
-
예제 코드

<template>
  <div class="ctnr">
    <p>    </p>
    <m-image-crop class="mic mic1"
           v-model="img"></m-image-crop>

    <p>    </p>
    <m-image-crop class="mic mic2"
           v-model="img2"
           :proportion="{ w: 100, h: 35 }"></m-image-crop>

    <p>  </p>
    <div class="list">
      <div class="item"
         v-for="(item, index) in imgList"
         :key="item.id">
        <m-image-crop class="mic"
               has-remove
               :value="item"
               :proportion="{ w: 1, h: 1 }"
               @remove="removeHandle(index)"></m-image-crop>
      </div>
      <div class="item add"
         @click="addHandle">    </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {},
      img2: {},
      imgList: []
    };
  },
  methods: {
    addHandle() {
      this.imgList.push({});
    },
    removeHandle(index) {
      this.imgList.splice(index, 1);
    }
  }
};
</script>

<style lang="less">
html,
body {
  margin: 0;
}
.ctnr {
  height: 100vh;
  .mic {
    border: 1px dotted #4fc08d;
  }
  .mic1 {
    width: 200px;
    height: 100px;
  }
  .mic2 {
    width: 100vw;
    height: 35vw;
  }
  .list {
    font-size: 0;
    .item {
      box-sizing: border-box;
      font-size: 14px;
      vertical-align: middle;
      display: inline-block;
      border: 1px dotted #4fc08d;
      width: 33.33vw;
      height: 33.33vw;
    }
    .add {
      text-align: center;
      line-height: 33.33vw;
    }
  }
}
</style>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.