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

更新時間：2018年03月01日 10:50:15 作者：phoebeCodeSpace

這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

預覽鏈接點擊預覽

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

需求

[x] 預覽：根據(jù)選擇圖像大小自適應(yīng)填充左側(cè)裁剪區(qū)域
[x] 裁剪：移動裁剪框右側(cè)預覽區(qū)域可實時預覽
[x] 上傳&清空：點擊確認上傳裁剪圖片，點擊取消按鈕清空圖像
[ ] 裁剪框可調(diào)節(jié)大小

實現(xiàn)步驟

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

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

1. 圖片選擇與讀取

選擇圖片：(methods:selectPic) 使用 input[type="file"] 彈出選擇圖片框，js 主動觸發(fā)點擊事件;
讀取圖片： (methods:readImage) 創(chuàng)建圖片對象，使用createObjectURL顯示圖片。 objectURL = URL.createObjectURL(blob) ;

2. 在canvas中展示圖片

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

清空畫布 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);
 # 參數(shù)
 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) 根據(jù)圖片大小，計算canvas寬高（data:cropperCanvasSize），以致圖片能夠在裁剪區(qū)域自適應(yīng)展示，并確定裁剪的左上角位置（data:cropperLocation）。
繪制左側(cè)裁剪區(qū)域圖像：(methods:renderCropperImg)

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

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

3. 移動裁剪框

知識點: onmousedown、onmousemove、onmouseup

具體實現(xiàn):

methods:drag()

記錄鼠標坐標，鼠標移動根據(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ù)器

知識點:

FormData 對象的使用
canvas.toBlob() ;
Convert Data URI to File then append to FormData

具體實現(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) {
    // ...
   }
  };
  });

總結(jié)

以上所述是小編給大家介紹的vue 實現(xiàn)剪裁圖片并上傳服務(wù)器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: