vue 이미지 편집 및 서버 업로드 기능 구현

미리 보기 링크 미리 보기 클릭
효과 도 는 다음 과 같 습 니 다.여러분,느낌 이 좋 습 니 다.실현 코드 를 참고 하 세 요.
 
수요

[x]미리 보기:그림 크기 에 따라 왼쪽 재단 영역

을 채 웁 니 다.

[x]재단:재단 상자 오른쪽 미리 보기 영역 을 이동 하면

을 실시 간 으로 미리 볼 수 있 습 니 다.

[x]업로드&비우 기:재단 사진 업로드 확인 을 클릭 하고 취소 단 추 를 누 르 면 이미지 삭제

[]재단 틀 크기 조절 가능

실현 절차
methods:funName()-원본 코드 에 대응 하 는 methods 의 funName 방법
data:dataName-원본 의 data 에 대응 하 는 dataName 데이터
1.그림 선택 및 읽 기

그림 선택:(methods:selectPic)input[type="file"]팝 업 으로 그림 상 자 를 선택 하고 js 가 클릭 이 벤트 를 주동 적 으로 터치 합 니 다.

그림 읽 기:(methods:readImage)그림 대상 을 만 들 고 createObject URL 로 그림 을 표시 합 니 다.objectURL = URL.createObjectURL(blob) ;

2.canvas 에 그림 보 여주 기
캔버스 지식 을 습득 해 야 합 니 다:

캔버스 ctx.clearRect(x,y,width,height)비우 기;

사각형 ctx.fillRect(x,y,width,height)를 채 웁 니 다.

원호 ctx.arc(x,y,r,startAngle,endAngle,counterclockwise)그리 기;직사각형 ctx.rect(x,y,width,height)그리 기;

그림 그리 기 drawImage

 

#   
 ctx.drawImage(image, dx, dy);
 ctx.drawImage(image, dx, dy, dWidth, dHeight);
 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 #   
 image    #      （   HTMLImageElement，HTMLVideoElement，   HTMLCanvasElement。）
 dx,dy    #     (destination canvas)      
 dWidth,dHeight  #     (destination canvas)       
 sx,sy    #    (source canvase)      
 sWidth,sHeight  #    (source canvase)       

5.그림 ctx.clip()편집 하기;
구체 적 인 절차:

계산 canvas 너비:(methods:calcCropperSize)그림 크기 에 따라 canvas 너비(data:cropperCanvasSize)를 계산 하여 그림 이 재단 구역 에서 전시 에 적응 하고 재단 의 왼쪽 상단 위치(data:cropperLocation)를 확인 할 수 있 습 니 다.

왼쪽 재단 영역 그림 그리 기:(methods:renderCropperImg)

재단 영역 vue data 설명도:
 

오른쪽 미리 보기 그림 그리 기:(methods:renderPreviewImg)

3.재단 상자 이동
지식 포인트:onmousedown,onmousemove,onmouseup
구체 적 인 실현:methods:drag()마우스 좌 표를 기록 하고 마우스 이동 은 오프셋 에 따라 원심 위 치 를 계산한다.

canvas.onmousedown = e => {
  let [lastX, lastY] = [e.offsetX, e.offsetY];
  self.movement = true;
  canvas.onmousemove = e => {
   self.circleCenter = {
   X:
    self.cropperCanvasSize.width > 2 * self.slectRadius
    ? self.circleCenter.X + (e.offsetX - lastX)
    : self.cropperCanvasSize.width / 2,
   Y:
    self.cropperCanvasSize.height > 2 * self.slectRadius
    ? self.circleCenter.Y + (e.offsetY - lastY)
    : self.cropperCanvasSize.height / 2
   };
   self.renderCropperImg();
   [lastX, lastY] = [e.offsetX, e.offsetY];
  };
  canvas.onmouseup = e => {
   self.movement = false;
   canvas.onmousemove = null;
   canvas.onmouseup = null;
  };
  };

4.서버 에 사진 업로드
지식 포인트:

FormData 대상 사용

canvas.toBlob() ;

Convert Data URI to File then append to FormData

구체 적 인 실현:

methods:upload()
this.$refs.preview.toBlob((blob)=> {
  const url = URL.createObjectURL(blob);
  const formData = new FormData();
  formData.append(this.uploadProps.name, blob, `${Date.now()}.png`);
  if(this.data){
   Object.keys(this.uploadProps.data).forEach(key => {
    formData.append(key, this.uploadProps.data[key]);
   });
  }
  const request = new XMLHttpRequest();
  request.open("POST", this.uploadProps.action, true);
  request.send(formData);
  request.onreadystatechange = () => {
   if (request.readyState === 4 && request.status === 200) {
    // ...
   }
  };
  });

총결산
위 에서 말 한 것 은 편집장 이 소개 한 vue 가 사진 을 편집 하고 서버 기능 을 업로드 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!