vue如何實現剪裁圖片并上傳服務器功能

小編給大家分享一下vue如何實現剪裁圖片并上傳服務器功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

預覽鏈接點擊預覽

效果圖如下所示，大家感覺不錯，請參考實現代碼。

需求

• [x] 預覽：根據選擇圖像大小自適應填充左側裁剪區域

• [x] 裁剪：移動裁剪框右側預覽區域可實時預覽

• [x] 上傳&清空：點擊確認上傳裁剪圖片，點擊取消按鈕清空圖像

• [ ] 裁剪框可調節大小
  

實現步驟

methods:funName() - 對應源碼中methods中的funName方法

data:dataName - 對應源碼中data中的dataName數據

1. 圖片選擇與讀取

• 選擇圖片 ：(methods:selectPic) 使用 input[type="file"] 彈出選擇圖片框，js 主動觸發點擊事件;

• 讀取圖片 ： (methods:readImage) 創建圖片對象，使用createObjectURL顯示圖片。 objectURL = URL.createObjectURL(blob) ;

2. 在canvas中展示圖片

需要掌握的 canvas 相關知識:

1. 清空畫布 ctx.clearRect(x,y,width,height) ;

2. 填充矩形 ctx.fillRect(x,y,width,height) ;

3. 繪制圓弧 ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ; 繪制矩形 ctx.rect(x,y,width,height);

4. 繪制圖像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是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

以上是“vue如何實現剪裁圖片并上傳服務器功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！