So implementieren Sie die Funktion zum Zuschneiden von Bildern und Hochladen auf den Server in Vue

Dieser Artikel stellt hauptsächlich die Funktion zum Zuschneiden von Bildern und zum Hochladen auf den Server in Vue vor. Er ist sehr gut und hat Referenzwert. Freunde in Not können sich auf den

Vorschaulink beziehen und zur Vorschau klicken

Rendering Wie unten gezeigt, fühlen sich alle gut. Bitte beachten Sie den Implementierungscode.

Anforderungen

• [x] Vorschau: Gemäß Auswahl Die Bildgröße füllt adaptiv den linken Zuschneidebereich

• [x] Zuschnitt: Verschieben Sie den Vorschaubereich auf der rechten Seite des Zuschneiderahmens, um eine Vorschau in Echtzeit anzuzeigen

• [x ] Hochladen und Löschen: Klicken Sie auf „Bestätigen“, um das zugeschnittene Bild hochzuladen. Klicken Sie auf die Schaltfläche „Abbrechen“, um das Bild zu löschen.

• [ ] Die Größe des Zuschneiderahmens kann geändert werden
  

Implementierungsschritte

methods:funName() – entspricht der funName-Methode in Methoden in der Quelle Code

data:dataName - entspricht dem funName in data im Quellcode dataName data

1. Bildauswahl und -lesen

• Bilder auswählen: (methods:selectPic) Mit input[ type="file"] wird das Bildauswahlfeld geöffnet und js löst aktiv das Klickereignis aus;

  Lesen Sie das Bild: (methods:readImage) Erstellen Sie ein Bildobjekt und verwenden Sie createObjectURL, um das Bild anzuzeigen. objectURL = URL.createObjectURL(blob) ;

2. Zeigen Sie Bilder in der Leinwand an

Leinwand, die Sie benötigen Master Verwandte Kenntnisse:

Löschen Sie die Leinwand ctx.clearRect(x,y,width,height);

1. Füllen Sie das Rechteck aus ctx.fillRect (x, y,width,height) ;

2. Zeichne einen Bogen ctx.arc(x,y,r,startAngle,endAngle,gegen den Uhrzeigersinn) ;Zeichne ein Rechteck ctx.rect(x,y ,width ,height);

3. Bild zeichnen 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. Bild zuschneiden ctx.clip();

Spezifische Schritte:

Breite und Höhe der Leinwand berechnen: (methods:calcCropperSize) Berechnen Sie die Breite und Höhe der Leinwand (data:cropperCanvasSize) basierend auf der Bildgröße, damit das Bild adaptiv im Zuschneidebereich angezeigt werden kann, und bestimmen Sie die Position von die obere linke Ecke des Zuschnitts (data:cropperLocation).

• Zeichnen Sie das Bild des linken Zuschneidebereichs: (methods:renderCropperImg)

• Vue-Datendiagramm des Zuschneidebereichs:

Zeichnen Sie das richtige Vorschaubild: (methods:renderPreviewImg)

3. Verschieben Sie den Zuschneiderahmen

Wissenspunkte: onmousedown, onmousemove, onmouseup

Spezifische Implementierung:

Mauskoordinaten und Maus aufzeichnen Die Bewegung basiert auf dem Versatz. Berechnen Sie die Mittelpunktposition des Kreises. 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. Bilder auf den Server hochladen

Wissenspunkte:

Verwendung des FormData-Objekts

• canvas.toBlob() ;

• Konvertieren Daten-URI an Datei und dann an FormData anhängen

• Spezifische Implementierung:

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) {
    // ...
   }
  };
  });

Das Obige habe ich für alle zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von ES6 zur Lösung des Speicherverlustproblems durch WeakMap (ausführliches Tutorial)

Verwenden von jquery, um Klicken Sie auf die Eingabetaste, um den Anmeldeeffekt zu erzielen (ausführliches Tutorial)

Globale Variablen oder Datenmethoden gemäß Vue festlegen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Zuschneiden von Bildern und Hochladen auf den Server in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!