Vue는 이미지를 자르고 서버에 업로드하는 기능을 구현합니다.

이 글은 vue에서 이미지 자르기 및 서버 업로드 기능을 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

미리보기 링크를 클릭하면 미리 볼 수 있습니다.

# 🎜🎜#아래 렌더링이 표시됩니다. 구현 코드를 참고하세요.

수요

# 🎜🎜#

[x] 미리보기: 선택한 이미지 크기에 따라 왼쪽 자르기 영역을 적응적으로 채웁니다.
[x] 자르기: 자르기 프레임을 다음으로 이동합니다. 미리보기 오른쪽 영역을 실시간으로 미리 볼 수 있습니다
[x] 업로드 및 지우기: 자른 이미지를 업로드하려면 확인을 클릭하고, 취소하려면 취소 버튼을 클릭하세요. 이미지
[ ] 자르기 프레임의 크기는 조정 가능합니다

• 
  

#🎜🎜 #

구현 단계

# 🎜🎜#methods:funName() - 소스 코드의 메소드에 있는 funName 메소드에 해당합니다. data: dataName - 소스 코드

# 🎜🎜#

1의 데이터에 있는 dataName 데이터에 해당합니다. #

그림 선택: (methods:selectPic) Use input[type ="file"] 그림 선택 상자가 나타나고 js는 클릭 이벤트를 적극적으로 트리거합니다. 🎜🎜#

그림 읽기: (메서드:readImage) 그림 개체를 만들고 createObjectURL을 사용하여 그림을 표시합니다. objectURL = URL.createObjectURL(blob) ;

2 캔버스에 이미지 표시

• #🎜 🎜 #

  꼭 마스터해야 할 캔버스 관련 지식:

• 캔버스 지우기 ctx.clearRect(x,y,width,height);
#🎜 🎜#

사각형 채우기 ctx.fillRect(x,y,width,height);호 그리기 ctx.arc (x, y,r,startAngle,endAngle,counterclockwise); 직사각형 그리기 ctx.lect(x,y,width,height);

이미지 그리기 drawImage
1. # 🎜🎜#

2. # 语法
    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)选择的图像宽高

3. #🎜🎜 ## 🎜 🎜#5. 그림 자르기 ctx.clip(); #캔버스 너비 및 높이 계산: (methods:calcCropperSize) 이미지가 적응적으로 표시될 수 있도록 이미지 크기를 기준으로 캔버스 너비 및 높이(data:cropperCanvasSize)를 계산합니다. 자르기 영역에서 자르기의 왼쪽 상단 모서리 위치를 결정합니다(data:cropperLocation).

4. 왼쪽 자르기 영역 이미지 그리기: (메서드:renderCropperImg)

자르기 영역 vue 데이터 다이어그램:

올바른 미리보기 이미지 그리기: (메소드:renderPreviewImg)#🎜🎜 #

3. 자르기 프레임 이동

지식 포인트: onmousedown, onmousemove, onmouseup

#🎜🎜 # 구체적인 구현:
• 은 마우스 좌표를 기록하고 마우스 움직임은 오프셋을 기반으로 원의 중심 위치를 계산합니다.

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() ;
데이터 URI를 파일로 변환한 후 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) {
    // ...
   }
  };
  });

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vux 업로더 이미지 업로드 구성 요소 설치 및 사용 방법 정보

methods:drag()

#🎜🎜 ## 🎜🎜#Vue에는 고정 테이블 헤더와 첫 번째 열을 구현하는 여러 가지 방법이 있습니다

# 🎜 🎜#

위 내용은 Vue는 이미지를 자르고 서버에 업로드하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!