Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern

/**
 * 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)
      }
    })
  })
}

<!-- Bild hochladen-->
<div Klasse="flex mt20" v-if="item.questionType === 4">
  <van-uploader
    v-Modell="item.imgUpload"
    mehrere="true"
    verzögertes Laden
    :deletetable="!istDeaktiviert"
    :disabled="istDeaktiviert"
    @delete="handleDeleteImg({ ...Argumente, Element })"
    :before-read="Handle vor Bildupload"
    :nachher-lesen="handleAfterImgUpload"
    @click.native="aktuellesItem = Artikel"
  />
</div>
    
<Skript>
importieren {
  getTaskDetail,
  BenutzerAusführen,
  SendenFlow,
  ablehnenFlow,
} von '@/api/myTask';

importiere { uploadOSS } von '@/utils/oss';
importiere { parseTime, addWaterMarker } aus '@/utils';

importiere { ImagePreview } von 'vant';

Compressor von „compressorjs“ importieren;

const fileExtensions = ['xlsx', 'xls', 'docx', 'doc', 'pdf'];

const quality = 0.2; //Bildkomprimierungsqualität export default {
  Methoden: {
  // Vor dem Hochladen async handleBeforeImgUpload(img, detail) {
      wenn (!img) {
        zurückkehren
      }
      returniere neues Promise(async (auflösen, ablehnen) => {
        wenn (Array.isArray(img)) {
          wenn (Bildlänge > 5) {
            this.$toast('Laden Sie bis zu 5 Fotos gleichzeitig hoch, bitte laden Sie sie in Stapeln hoch!')
            ablehnen()
          }
          lass Blobs = []
          für (const-Datei von img) {
            // Bilder, die größer als 512 KB sind, werden zuerst komprimiert, wenn (Dateigröße > 512 * 1024 und file.type.includes('image/')) {
              Datei = warte auf this.compressor(Datei)
            }
            // Wasserzeichen hinzufügen let blob = await addWaterMarker(file)
            blob.name = datei.name
            blobs.push(blob)
          }
          auflösen (Blobs)
        } anders {
          // Bilder, die größer als 512 KB sind, sollten zuerst komprimiert werden, wenn (Bildgröße > 512 * 1024 && img.type.includes('image/')) {
            img = warte auf dies.compressor(img)
          }
          const blob = warte auf addWaterMarker(img).
          blob.name = img.name
          auflösen (Blob)
        }
      })
    },
    
    //Nach dem Hochladen async handleAfterImgUpload(img, detail) {
      versuchen {
        $wird geladen.anzeigen()
        wenn (Array.isArray(img)) {
          img.forEach(async ({ Datei }, Index) => {
            wenn (!Dateiname || !Dateityp.includes('Bild/')) {
              dies.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('Upload fehlgeschlagen, es können nur Fotos hochgeladen werden!')
              // Hochladen abgeschlossen, wenn (Index === Bildlänge - 1) {
                $wird geladen.ausblenden()
              }
              return //return in forEach entspricht continue
            }
            if (Dateigröße > 1024 * 1024 * 10) {
              dies.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('Die Datei ist zu groß, eine einzelne Datei darf nicht größer als 10 MB sein!')
              // Hochladen abgeschlossen, wenn (Index === Bildlänge - 1) {
                $wird geladen.ausblenden()
              }
              zurückkehren
            }
            versuchen {
              const { Dateiname, URL } = warte auf UploadOSS(Datei)
              dies.currentItem.answer.push({
                URL (URL = URL = URL),
              })
            } Fehler abfangen {
              dies.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('Hochladen fehlgeschlagen, bitte versuchen Sie es später noch einmal!')
              Konsole.Fehler(Fehler)
            }
            // Hochladen abgeschlossen, wenn (Index === Bildlänge - 1) {
              $wird geladen.ausblenden()
            }
          })
        } anders {
          wenn (!img.file.type.includes('image')) {
            dies.currentItem.imgUpload.splice(detail.index, 1)
            $wird geladen.ausblenden()
            this.$toast('Upload fehlgeschlagen, es können nur Fotos hochgeladen werden!')
            zurückkehren
          }
          wenn (Bilddateigröße >= 1024 * 1024 * 10) {
            dies.currentItem.imgUpload.splice(detail.index, 1)
            $wird geladen.ausblenden()
            this.$toast('Die Datei ist zu groß und darf 10 MB nicht überschreiten!')
            zurückkehren
          }
          // Wenn es größer als 512 KB ist, komprimieren Sie es zuerst. let file = img.file
          const { Dateiname, URL } = warte auf UploadOSS(Datei)
          dies.currentItem.answer.push({
            URL (URL = URL = URL),
          })
          $wird geladen.ausblenden()
        }
      } Fehler abfangen {
        dies.currentItem.imgUpload.splice(detail.index, 1)
        $wird geladen.ausblenden()
        this.$toast('Hochladen fehlgeschlagen, bitte versuchen Sie es später noch einmal!')
        Konsole.Fehler(Fehler)
      }
    }
 }