vue如何實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能

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

預(yù)覽鏈接點(diǎn)擊預(yù)覽

效果圖如下所示，大家感覺不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼。

需求

• [x] 預(yù)覽：根據(jù)選擇圖像大小自適應(yīng)填充左側(cè)裁剪區(qū)域

• [x] 裁剪：移動(dòng)裁剪框右側(cè)預(yù)覽區(qū)域可實(shí)時(shí)預(yù)覽

• [x] 上傳&清空：點(diǎn)擊確認(rèn)上傳裁剪圖片，點(diǎn)擊取消按鈕清空?qǐng)D像

• [ ] 裁剪框可調(diào)節(jié)大小
  

實(shí)現(xiàn)步驟

methods:funName() - 對(duì)應(yīng)源碼中methods中的funName方法

data:dataName - 對(duì)應(yīng)源碼中data中的dataName數(shù)據(jù)

1. 圖片選擇與讀取

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

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

2. 在canvas中展示圖片

需要掌握的 canvas 相關(guān)知識(shí):

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);
 # 參數(shù)
 image    # 繪制的元素（可以為HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。）
 dx,dy    # 目標(biāo)畫布(destination canvas)左上角的坐標(biāo)
 dWidth,dHeight  # 目標(biāo)畫布(destination canvas)上繪制圖像寬高
 sx,sy    # 源畫布(source canvase)左上角的坐標(biāo)
 sWidth,sHeight  # 源畫布(source canvase)選擇的圖像寬高

5.剪裁圖片 ctx.clip() ;

具體步驟:

• 計(jì)算canvas寬高 ：(methods:calcCropperSize) 根據(jù)圖片大小，計(jì)算canvas寬高（data:cropperCanvasSize），以致圖片能夠在裁剪區(qū)域自適應(yīng)展示，并確定裁剪的左上角位置（data:cropperLocation）。

• 繪制左側(cè)裁剪區(qū)域圖像 ：(methods:renderCropperImg)

裁剪區(qū)域vue data示意圖：

• 繪制右側(cè)預(yù)覽圖片 ：(methods:renderPreviewImg)

3. 移動(dòng)裁剪框

知識(shí)點(diǎn): onmousedown、onmousemove、onmouseup

具體實(shí)現(xiàn):

methods:drag()

記錄鼠標(biāo)坐標(biāo)，鼠標(biāo)移動(dòng)根據(jù)偏移量計(jì)算圓心位置。

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. 上傳圖片至服務(wù)器

知識(shí)點(diǎn):

• FormData 對(duì)象的使用

• canvas.toBlob() ;

• Convert Data URI to File then append to FormData

具體實(shí)現(xiàn):

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是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

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