Lassen Sie uns zunächst über die grundlegenden Methoden des Leinwandzeichnens sprechen:
const myCanvas = document.createElement('canvas'); myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image();img.src = 1.jpg;//In drawImage, wenn das Bild geladen wird, sonst ist das Bild möglicherweise noch nicht geladen img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} Grammatik:drawImage(image, x, y)
Zeichnen Sie ausgehend vom angegebenen Koordinatenpunkt auf der Leinwand das gesamte Bild entsprechend der Originalgröße des Bildes.
drawImage(Bild, x, y, Breite, Höhe)
Zeichnen Sie ausgehend vom angegebenen Koordinatenpunkt auf der Leinwand das gesamte Bild mit der angegebenen Größe (Breite und Höhe) und das Bild wird automatisch skaliert.
drawImage(image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)
Zeichnen Sie das Teilbild des angegebenen Bildes (den rechteckigen Teil mit (imageX, imageY) als obere linke Ecke, Breite als imageWidth und Höhe als imageHeight) in die Leinwand, mit (x, y) als Koordinate der oberen linken Ecke. Breite als Breite und Höhe als Höhe im rechteckigen Bereich von
Das Geschäftsszenario dieses Multi-Image-Stitchings besteht darin, benutzerdefinierte freigegebene Bilder mit unterschiedlichen Inhalten zu erstellen. Zu den verwendeten Bildelementen gehören Hintergrundbilder, externe Linkbilder, Website-Logos und benutzerdefinierte QR-Code-Bilder Wird beim Konvertieren der Leinwand- in eine Bildausgabe erzeugt. Es gibt drei Hauptpunkte:
1. Domänenübergreifende Probleme mit Bildern;
2. Das Zeichnen mehrerer Bilder führt zu einer Verschmutzung der Leinwand.
3. Die Größe des Bildes;
Da ist zunächst einmal das domänenübergreifende Problem der Bilder. Zu diesem Problem gibt es viele relevante Informationen. Die Lösung lautet wie folgt:
img.setAttribute('crossOrigin', 'anonymous');Nach der Lösung des domänenübergreifenden Problems erschien nach dem Zusammenfügen und Exportieren mehrerer Bilder eine neue Fehlermeldung:
Nicht abgefangene DOMException: „toDataURL“ konnte nicht auf „HTMLCanvasElement“ ausgeführt werden: Befleckte Leinwände können möglicherweise nicht exportiert werden.
Als ich dieses Problem entdeckte, überprüfte ich die Informationen im Internet und die meisten davon wurden mit der oben genannten domänenübergreifenden Methode gelöst, aber in meinem Geschäftsszenario funktionierte es offensichtlich nicht.
Bei der Fehlerbehebung des Codes habe ich festgestellt, dass dieser Fehler nicht gemeldet wird, wenn ein Hintergrundbild + ein QR-Code-Bild verwendet wird. Wenn das externe Linkbild domänenübergreifend verarbeitet wird, wird bei alleiniger Verwendung kein Fehler gemeldet. Bei den Logobildern handelt es sich ausschließlich um lokale Dateien, die offensichtlich kein domänenübergreifendes Problem darstellen sollten.
Der Grund, warum das QR-Code-Bild und das Hintergrundbild fehlerfrei sind, sollte also darin liegen, dass die QR-Code-Bildquelle im Base64-Format vorliegt.
Also habe ich versucht, das Logo-Bild mit Canvas in das Base64-Format zu exportieren und es dann mit dem Hintergrundbild + dem QR-Code-Bild zu kombinieren. Beim Exportieren wurden tatsächlich keine Fehler gemeldet.
Alle Probleme mit Tainted Canvases beim gemeinsamen Exportieren mehrerer Bilder können vermieden werden, indem die Bildelemente in das Base64-Format umgewandelt werden.
Da es in meinem Geschäftsszenario externe Linkbilder gibt und nicht alle externen Links den Domänennamen meiner Website verarbeitet haben, um eine domänenübergreifende Verarbeitung zu ermöglichen, verwende ich beim Generieren der Base64-Daten des externen Linkbilds das Ereignis img.onerror Verarbeitung, ersetzt durch das Standarddiagramm.
Da mehrere Bilder separat verarbeitet werden, bevor das Gesamtbild gezeichnet wird, ist es möglicherweise besser, die Promise-Verarbeitung zu verwenden.
Versuchen Sie, die Größe des Bildexports zu verwenden
myCanvas.toDataURL('image/jpeg', EncoderOptions)EncoderOptions: Sie können die Qualität des Bildes von 0 bis 1 wählen. Bei Überschreitung des Wertebereichs wird der Standardwert 0,92 verwendet. Andere Parameter werden ignoriert.
Das Obige ist eine persönliche Zusammenfassung meiner Erfahrungen beim Zusammenfügen mehrerer Bilder auf Leinwand und beim Exportieren. Ich hoffe, dass es zum Lernen aller beitragen wird, und ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.