집 > 기사 > 웹 프론트엔드 > Vue는 이미지를 자르고 서버에 업로드하는 기능을 구현합니다.

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

不言원래의: 2018-06-29 14:52:492240검색

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

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

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

수요

# 🎜🎜#

구현 단계

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

# 🎜🎜#

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

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

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

#🎜 🎜 #
꼭 마스터해야 할 캔버스 관련 지식:
캔버스 지우기 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);

# 🎜🎜#

# 语法
 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(); #캔버스 너비 및 높이 계산: (methods:calcCropperSize) 이미지가 적응적으로 표시될 수 있도록 이미지 크기를 기준으로 캔버스 너비 및 높이(data:cropperCanvasSize)를 계산합니다. 자르기 영역에서 자르기의 왼쪽 상단 모서리 위치를 결정합니다(data:cropperLocation).
왼쪽 자르기 영역 이미지 그리기: (메서드: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 사진을 서버에 업로드하세요

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 중국어 홈페이지를 주목해주세요!

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

관련 기사