首頁 > web前端 > js教程 > 主體

vue 實作剪裁圖片並上傳伺服器的功能介紹

不言
發布: 2018-06-29 14:52:49
原創
2243 人瀏覽過

這篇文章主要介紹了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) {
    // ...
   }
  };
  });
登入後複製
######以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網! ######相關推薦:#########關於vux uploader 圖片上傳元件的安裝使用方法###############Vue多種方法實作表頭和首列固定的方法###########################

以上是vue 實作剪裁圖片並上傳伺服器的功能介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板