Vue ermöglicht das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern (aktualisierte Version)

/**
 * Wasserzeichen hinzufügen * @param {blob} Datei
 * @param {string} el
 * @returns {Versprechen}
 */
exportiere asynchrone Funktion addWaterMarker(Datei, el = '#markImg') {
  returniere neues Promise(async (auflösen, ablehnen) => {
    versuchen {
      // Komprimieren und drehen Sie das Bild zuerst file = warte auf compressor(file)
      // Konvertiere den Datei-Blob in ein Bild let img = await blobToImg(file)

      //Eine Leinwand erstellen let canvas = document.createElement('canvas')
      canvas.width = img.natürlicheBreite
      Leinwandhöhe = Bild.natürliche Höhe
      lass ctx = canvas.getContext('2d')

      // Das hochgeladene Bild füllen ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // Wasserzeichenbild generieren const markEle = document.querySelector(el)
      const markWidth = markEle.clientWidth
      const scale = Leinwandbreite * 0,25 / Markierungsbreite
      // Skalieren Sie zuerst das Wasserzeichen und konvertieren Sie es dann in ein Bild markEle.style.transform = `scale(${scale})`
      const markImg = warte auf htmlToCanvas(markEle).

      // Wasserzeichen füllen ctx.drawImage(markImg, canvas.width – markImg.width – 15 * scale, canvas.height – markImg.height – 15 * scale, markImg.width, markImg.height)

      //Leinwand in Blob umwandeln
      canvas.toBlob(Blob => auflösen(Blob))
    } Fehler abfangen {
      ablehnen(Fehler)
    }

  })
}

Funktion blobToImg(blob) {
  returniere neues Promise((lösen, ablehnen) => {
    let reader = neuer FileReader()
    reader.addEventListener('laden', () => {
      let img = neues Bild()
      img.src = Leser.Ergebnis
      img.addEventListener('laden', () => auflösen(img))
    })
    Leser.readAsDataURL(blob)
  })
}


Exportfunktion htmlToCanvas(el, Hintergrundfarbe = 'rgba(0,0,0,.1)') {
  returniere neues Promise(async (auflösen, ablehnen) => {
    versuchen {
      const markImg = warte auf html2canvas(el, {
        scale: 2, //Der Standardwert window.devicePixelRatio wird hier nicht verwendet, er muss mit dem mobilen Ende übereinstimmen allowTaint: false, //Verschmutzung zulassen useCORS: true,
        backgroundColor //'transparent' //Hintergrundfarbe})
      auflösen(markImg)
    } Fehler abfangen {
      ablehnen(Fehler)
    }
  })
}

/**
 * Bilder komprimieren und drehen * @param {blob} Datei
 * @param {number} Qualitätskomprimierungsverhältnis * @param {number} maxWidth
 * @returns {Versprechen}
 */
Exportfunktion Kompressor (Datei, Qualität = 0,6, max. Breite = 750) {
  gib ein neues Versprechen zurück (Auflösen => {
    neuer Kompressor (Datei, {
      maxBreite,
      Qualität,
      Erfolg: Entschlossenheit,
      Fehler(Fehler) {
        console.log(Fehlermeldung)
      }
    })
  })
}

<Vorlage>
  <div>
    <el-hochladen
      Aktion=""
      :headers="uploadProps.headers"
      Listentyp = "Bildkarte"
      :Dateiliste anzeigen="false"
      :http-request="fnUploadRequest"
      :bei-Erfolg="HandleErfolg"
      :before-upload="Upload-Handle"
      akzeptieren=".png,.jpg,.jpeg,.gif,.webp"
    >
      <div Klasse="flex-center">
        <Steckplatz></Steckplatz>
      </div>
    </el-upload>
    <!-- Wasserzeichen zum Hochladen von Bildern-->
    <div id="markImg">
      <div Klasse="Logo">
        <img src="@/assets/img/icon-logo.png" />
        Text text</div>
      <p>
        {{ parseTime(fileDate, '{y}-{m}-{d} {h}:{i}:{s}') }} Woche {{
          parseTime(Dateidatum, '{a}')
        }}
      </p>
      <p>{{ Testamentsvollstrecker }}</p>
    </div>
  </div>
</Vorlage>

<Skript>
importieren {
  getAccessToken,
  getRefreshToken,
  getAccessTokenTTL
} von '@/utils/auth'
importiere { uploadOSS } von '@/utils/ossImage'
importiere { parseTime, compressor, addWaterMarker } aus '@/utils'

Standard exportieren {
  Name: "Index",
  Requisiten: {
    braucheWasserzeichen:
      Typ: Boolean,
      Standard: false
    },
    Testamentsvollstrecker: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  Daten() {
    zurückkehren {
      DateiDatum: neues Datum()
    }
  },
  erstellt() {
    this.parseTime = Analysezeit
  },
  berechnet: {
    BenutzerkontoID() {
      gib dies zurück.$store.state.user.userAccountID
    },
    uploadProps() {
      zurückkehren {
        // Aktion: `${process.env.VUE_APP_BASE_API}/api/image/upload`,
        Überschriften: {
          // Die Schnittstelle erfordert möglicherweise ein Token: "",
          Autorisierung: getAccessToken()
        },
        Daten: {}
      }
    }
  },
  Methoden: {
    // vorUpload_u(Datei, Dateiliste){
    // // console.log(Datei, Dateiliste);
    // var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
    // const-Erweiterung = testmsg === 'png' || testmsg === 'jpg' || testmsg === 'jpeg' || testmsg === 'gif' || testmsg === 'webp'
    // const isLimit10M = Dateigröße / 1024 / 1024 < 10
    // var bool = false;
    // wenn (Erweiterung && isLimit10M) {
    // bool = wahr;
    // } anders {
    // bool = falsch;
    // }
    // wenn(!Erweiterung) {
    // this.$message.error('Bitte laden Sie eine Datei im Bildformat hoch!');
    // bool zurückgeben;
    // }
    // wenn(!isLimit10M) {
    // this.$message.error('Upload fehlgeschlagen, darf 10 M nicht überschreiten!');
    // bool zurückgeben;
    // }
    // bool zurückgeben;
    // },
    // Erfolgreich verarbeiten(res) {
    // konsole.log(res);
    // wenn (res.code == 0) {
    // dies.$emit('imgData', res.item);
    // this.$message.success('Bild erfolgreich hochgeladen!');
    // } anders {
    // this.$message.error('Bild konnte nicht hochgeladen werden!');
    // }
    // },
    // Fehler behandeln(Fehler){
    // this.$message.error('Bild konnte nicht hochgeladen werden!');
    // },

    // Bild hochladen Beurteilung handleUpload(file, fileList) {
      var testmsg = Datei.Name.Teilzeichenfolge(Datei.Name.letzterIndexvon('.') + 1)
      const-Erweiterung =
        testmsg.toLowerCase() === 'png' ||
        testmsg.toLowerCase() === 'jpg' ||
        testmsg.toLowerCase() === 'jpeg' ||
        testmsg.toLowerCase() === 'gif' ||
        testmsg.toLowerCase() === 'webp'
      const isLimit10M = Dateigröße / 1024 / 1024 < 10
      var bool = false
      if (Erweiterung && isLimit10M) {
        bool = wahr
      } anders {
        bool = falsch
      }
      if (!Erweiterung) {
        this.$message.error('Bitte laden Sie eine Datei im Bildformat hoch!')
        Rückgabewert bool
      }
      wenn (!isLimit10M) {
        this.$message.error('Upload fehlgeschlagen, darf 10 M nicht überschreiten!')
        Rückgabewert bool
      }
      Rückgabewert bool
    },
    // Bild asynchron hochladen fnUploadRequest(options) {
      versuchen {
        let file = options.file // Datei abrufen
        this.fileDate = Datei.letztesÄnderungsdatum
        // Komprimiere das Bild, wenn (Dateigröße > 512 * 1024 und file.type.includes('image/')) {
          Datei = warte auf Kompressor (Datei)
        }
        // Wasserzeichen hinzufügenif (this.needWaterMark) {
          const fileName = datei.name
          Datei = warte auf addWaterMarker(Datei, '#markImg')
          file.name = Dateiname
        }
        let res = warte auf UploadOSS(Datei)
        // Was zurückgegeben wird, ist die Bildadresse this.$emit('imgData', res)
        this.$message.success('Bild erfolgreich hochgeladen!')
      } fangen (e) {
        console.log(e)
        this.$message.error('Bild konnte nicht hochgeladen werden! Bitte erneut hochladen.')
      }
    },
    //Bildupload erfolgreich callback handleSuccess(res) {
      // konsole.log(res);
      wenn (res) {
        dies.$emit('imgData', res)
      }
    }
  }
}
</Skript>

<style lang="scss" scoped>
::v-tief .el-upload,
::v-deep .el-upload--Bildkarte {
  // Breite: 120px;
  Höhe: 24px;
  Höhe: 0;
  Rand: keiner;
  Zeilenhöhe: 0;
  Anzeige: Block;
  Hintergrund: #f5f6fb;
}
// ::v-tief .el-upload{
// Breite: 50px;
// }
.img-cont {
  Breite: 50px;
  Höhe: 24px;
  Hintergrund: #f5f6fb;
  .img-Symbol {
    Farbe: #ccc;
  }
  .img-text {
    Schriftgröße: 12px;
    Höhe: 24px;
    Farbe: #000;
  }
}
#markImg {
  Position: absolut;
  links: -9999999px;
  Textausrichtung: rechts;
  Polsterung: 10px 15px;
  .logo {
    Schriftstärke: 600;
    Schriftgröße: 15px;
    Farbe: #ffffff;

    Anzeige: Flex;
    Höhe: 21px;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: Flex-Ende;
    img {
      Höhe: 21px;
      Rand rechts: 5px;
    }
  }
  P {
    Rand oben: 6px;
    Farbe: #ffffff;
    Schriftgröße: 12px;
    Schriftstärke: 400;
  }
}
</Stil> 

/**
 * Bilder komprimieren und drehen * @param {blob} Datei
 * @param {number} Qualitätskomprimierungsverhältnis * @param {number} maxWidth
 * @returns {Versprechen}
 */
Exportfunktion Kompressor (Datei, gezeichnet, max. Breite = 750, Qualität = 0,6) {
  gib ein neues Versprechen zurück (Auflösen => {
    neuer Kompressor (Datei, {
      streng: falsch,
      maxBreite,
      Qualität,
      zeichnete,
      Erfolg: Entschlossenheit,
      Fehler(Fehler) {
        console.log(Fehlermeldung)
      }
    })
  })
}

/**
 * Wasserzeichen hinzufügen * @param {blob} Datei
 * @param {string} el
 * @returns {Versprechen}
 */
 exportiere asynchrone Funktion addWaterMarker(Datei, el = '#brandMarkImg', Richtung = 'rightDown') {
  returniere neues Promise(async (auflösen, ablehnen) => {
    versuchen {
      const maxWidth = 750
      const img = warte auf blobToImg(Datei).
      const imgWidth = img.naturalWidth > maxWidth ? maxWidth : img.naturalWidth

      // Wasserzeichenbild generieren const markEle = document.querySelector(el)
      const scale = Bildbreite * 0,25 / markEle.clientWidth
      // Skalieren Sie zuerst das Wasserzeichen und konvertieren Sie es dann in ein Bild markEle.style.transform = `scale(${scale})`
      const markImg = warte auf htmlToCanvas(markEle).

      // Komprimieren und drehen Sie zuerst das Bild file = await compressor(file, (context, canvas) => {
        wenn(Richtung == 'rechtsUnten'){
          // Füllen Sie die untere rechte Ecke des Wasserzeichens context.drawImage(markImg, canvas.width – markImg.width – 15 * scale, canvas.height – markImg.height – 15 * scale, markImg.width, markImg.height)
        } anders {
          // Füllen Sie die untere linke Ecke des Wasserzeichens context.drawImage(markImg, 15 * scale, canvas.height - markImg.height - 15 * scale, markImg.width, markImg.height)
        }
      }, maxBreite)
      auflösen (Datei)
    } Fehler abfangen {
      ablehnen(Fehler)
    }

  })
}

Funktion blobToImg(blob) {
  returniere neues Promise((lösen, ablehnen) => {
    let reader = neuer FileReader()
    reader.addEventListener('laden', () => {
      let img = neues Bild()
      img.src = Leser.Ergebnis
      img.addEventListener('laden', () => auflösen(img))
    })
    Leser.readAsDataURL(blob)
  })
}

Exportfunktion htmlToCanvas(el, Hintergrundfarbe = 'rgba(0,0,0,.1)') {
  returniere neues Promise(async (auflösen, ablehnen) => {
    versuchen {
      const markImg = warte auf html2canvas(el, {
        Maßstab: 2,
        allowTaint: false, //Verschmutzung zulassen useCORS: true,
        backgroundColor //'transparent' //Hintergrundfarbe})
      auflösen(markImg)
    } Fehler abfangen {
      ablehnen(Fehler)
    }
  })
}