JavaScript zum Erzielen eines Klickbild-Flip-Effekts

/**
     * Bildrotation* @param direction Die Rotationsrichtung*/
    drehen (Richtung) {
      const img = neues Bild()
      // Die Idee besteht darin, das Bild auf ein Zeichenbrett abzubilden und das Bild dann neu zu zeichnen. Daher müssen wir ein Canvas-Objekt erstellen, das als Zeichenbrett fungiert. const canvas = document.createElement('canvas')
      // Base64-Konvertierung des Bildobjekts img.src = this.uploadImage
      // Denken Sie daran, base64 in ein Bildobjekt zu konvertieren, bevor Sie andere Vorgänge ausführen. Dem Autor ist hier ein Fehler unterlaufen. Die Onload-Methode lädt das Bild, bevor andere Vorgänge ausgeführt werden. Wenn das Bild ein Dateipfad ist, ist der domänenübergreifende Aufrufeffekt offensichtlicher.img.onload = () => {
        // Die Höhe und Breite von img können nicht abgerufen werden, nachdem das img-Element ausgeblendet wurde, andernfalls tritt ein Fehler auf const height = img.height
        const width = img.width
        // Der Drehwinkel ist in Radiant als Parameter angegeben const ctx = canvas.getContext('2d')
        wenn (Richtung === 'rechts') {
          canvas.width = Höhe
          canvas.height = Breite
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(Bild, 0, 0, Breite, -Höhe)
        } anders {
          canvas.width = Höhe
          canvas.height = Breite
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(Bild, 0, 0, -Breite, Höhe)
        }
        // Konvertiere das gedrehte Bild zurück in Base64
        dies.uploadImage = dies.getBase64Image(img, canvas)
      }
    },
    /**
    * Konvertieren Sie die Bilddatei in Base64
    */
    getBase64Image (Bild, Leinwand) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(Bild, 0, 0, Bildbreite, Bildhöhe)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      returniere canvas.toDataURL('image/' + ext)
    }