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) {
                // ...
          }
        };
      });
複製代碼

---

源代碼地址 原文連接