Html2canvas: Bild gefüllt, sogar div auf Objektanpassung eingestellt: cover;

Hallo, nur um Sie wissen zu lassen, dass ich dies brauche und es gehackt habe, um in meinem Projekt zu funktionieren. Ich gebe den Code an, der für mich unten funktioniert. Dies ist jedoch ein Hack, ich habe nicht das Wissen, um dies richtig in Ihr Projekt zu integrieren:

```
Schlüssel: 'drawImage',
Wert: Funktion drawImage(Bild, Quelle, Ziel) {
/ BENUTZERDEFINIERTER CODE STARTEN /

        var newWidth = 30;
        var newHeight = 30;
        var newX = destination.left;
        var newY = destination.top;

        // console.log(image, source, destination);
        if (source.width/destination.width > source.height/destination.height) {
            newWidth = destination.width;
            newHeight = source.height * (destination.width / source.width);
            newY = destination.top + (destination.height - newHeight) / 2;
        } else {
            newWidth = source.width * (destination.height / source.height);
            newHeight = destination.height;
            newX = destination.left + (destination.width - newWidth) / 2;
        }
      // console.log(newWidth, newHeight);

        this.ctx.drawImage(image, source.left, source.top, source.width, source.height,
          newX, newY,
          newWidth, newHeight);
        // destination.width,
        // destination.height * (source.height / source.width)
        //   destination.width, destination.height);

      /**END CUSTOM CODE**/
    }

```

Nehmen Sie die Lösung von LanderBeeuwsaert (indem Sie html2canvas.js herunterladen, damit Sie den Code wie zuvor bearbeiten können) und ersetzen Sie

if (source.width/destination.width > source.height/destination.height) {

mit

if (source.width/destination.width < source.height/destination.height) {

Damit sollten Sie Ihre gewünschten Ergebnisse erzielen. Bei mir hat es zumindest funktioniert.

Gibt es hierzu Neuigkeiten?

@LanderBeeuwsaert vielen Dank es hat perfekt

@niklasvh Anscheinend haben Sie das Projekt aktualisiert.
Ich wäre begierig, diesen hier zu bekommen. Lassen Sie es mich wissen, wenn Sie irgendwie genaueren Code als diesen benötigen würden.

@LanderBeeuwsaert wo soll ich diesen Hack von dir implementieren?

@SamuraiPetrus
Hey, ja, die Struktur des Projekts wurde durch die Umstellung auf Typoskript komplett von 0.5 auf 1.0.0 geändert.
Ich habe vor einiger Zeit gesucht, wo es in 1.0.0 hingehen sollte, damit ich möglicherweise eine PR machen könnte, aber ich habe es nicht gefunden. Also verwende ich mit diesem Hack immer noch 0.5.

Verwenden Sie Version 1.0.0-alpha.9 und fügen Sie einen patch-package mit @LanderBeeuwsaert- Code wie diesen html2canvas+1.0.0-alpha.9.patch :

diff --git a/node_modules/html2canvas/dist/html2canvas.js b/node_modules/html2canvas/dist/html2canvas.js
index 5f34081..66d1909 100644
--- a/node_modules/html2canvas/dist/html2canvas.js
+++ b/node_modules/html2canvas/dist/html2canvas.js
@@ -2443,7 +2443,22 @@ var CanvasRenderer = function () {
     }, {
         key: 'drawImage',
         value: function drawImage(image, source, destination) {
-            this.ctx.drawImage(image, source.left, source.top, source.width, source.height, destination.left, destination.top, destination.width, destination.height);
+            var newWidth = 30;
+            var newHeight = 30;
+            var newX = destination.left;
+            var newY = destination.top;
+
+            if (source.width/destination.width < source.height/destination.height) {
+                newWidth = destination.width;
+                newHeight = source.height * (destination.width / source.width);
+                newY = destination.top + (destination.height - newHeight) / 2;
+            } else {
+                newWidth = source.width * (destination.height / source.height);
+                newHeight = destination.height;
+                newX = destination.left + (destination.width - newWidth) / 2;
+            }
+
+            this.ctx.drawImage(image, source.left, source.top, source.width, source.height, newX, newY, newWidth, newHeight);
         }
     }, {
         key: 'drawShape',

Vergessen Sie nicht, die nicht minimierte Version zu importieren, indem Sie den vollständigen Pfad angeben:

const html2canvas = require('html2canvas/dist/html2canvas.js');

Ich kann den Alpha-Build nicht installieren und das Patch-Paket funktioniert bei mir nicht. Gibt es keine Möglichkeit dies umzusetzen?

Eine geeignete Problemumgehung für meine Situation besteht darin, nur Hintergrundbilder zu verwenden.

Hallo, nur um Sie wissen zu lassen, dass ich dies brauche und es gehackt habe, um in meinem Projekt zu funktionieren. Ich gebe den Code an, der für mich unten funktioniert. Dies ist jedoch ein Hack, ich habe nicht das Wissen, um dies richtig in Ihr Projekt zu integrieren:

    key: 'drawImage',
      value: function drawImage(image, source, destination) {
        /**START CUSTOM CODE**/

          var newWidth = 30;
          var newHeight = 30;
          var newX = destination.left;
          var newY = destination.top;

          // console.log(image, source, destination);
          if (source.width/destination.width > source.height/destination.height) {
              newWidth = destination.width;
              newHeight = source.height * (destination.width / source.width);
              newY = destination.top + (destination.height - newHeight) / 2;
          } else {
              newWidth = source.width * (destination.height / source.height);
              newHeight = destination.height;
              newX = destination.left + (destination.width - newWidth) / 2;
          }
        // console.log(newWidth, newHeight);

          this.ctx.drawImage(image, source.left, source.top, source.width, source.height,
            newX, newY,
            newWidth, newHeight);
          // destination.width,
          // destination.height * (source.height / source.width)
          //   destination.width, destination.height);

        /**END CUSTOM CODE**/
      }

Wo muss ich diesen Code einfügen?

Nach etwas Fummelei habe ich es in der aktuellen Version für meine Zwecke zum Laufen bekommen.

        CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
        if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
            var box = contentBox(container);
            /*CUSTOM CODE*/
            var newWidth = 30;
            var newHeight = 30;
            var newX = box.left;
            var newY = box.top;

            if (container.intrinsicWidth / box.width < container.intrinsicHeight / box.height) {
                    newWidth = box.width;
                    newHeight = container.intrinsicHeight * (box.width / container.intrinsicWidth);
                    newY = box.top + (box.height - newHeight) / 2;
            }
            else {
                newWidth = container.intrinsicWidth * (box.height / container.intrinsicHeight);
                newHeight = box.height;
                newX = box.left + (box.width - newWidth) / 2;
            }
            var path = calculatePaddingBoxPath(curves);
            this.path(path);
            this.ctx.save();
            this.ctx.clip();
            this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, newX, newY, newWidth, newHeight);
            this.ctx.restore();
        }
    };

Suchen Sie in der nicht minimierten Datei nach den ersten Zeilen. Danke an @LanderBeeuwsaert für den

@canoncarlson freut mich, danke für das Update. Wir werden es integrieren und können daher in den kommenden Wochen aktualisieren.

Ich habe es auch geschafft, es zum Laufen zu bringen, ändere CanvasRenderer.prototype.renderReplacedElement in node_modules/html2canvas/dist/html2canvas.js um Zeile 6274, ich verwende die RC 5-Version, es ist im Grunde der gleiche Code wie @canoncarlson , nur um Bestätigen Sie, dass die Objektanpassung mit dieser Modifikation funktioniert

CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
  if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
      var box = contentBox(container);
      var path = calculatePaddingBoxPath(curves);

      this.path(path);
      this.ctx.save();
      this.ctx.clip();

      let newWidth;
      let newHeight;
      let newX = box.left;
      let newY = box.top;

      if(container.intrinsicWidth / box.width < container.intrinsicHeight / box.height) {
        newWidth = box.width;
        newHeight = container.intrinsicHeight * (box.width / container.intrinsicWidth);
        newY = box.top + (box.height - newHeight) / 2;
      } else {
        newWidth = container.intrinsicWidth * (box.height / container.intrinsicHeight);
        newHeight = box.height;
        newX = box.left + (box.width - newWidth) / 2;
      }

      this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, newX, newY, newWidth, newHeight);
      this.ctx.restore();
  }
};

Danke an @LanderBeeuwsaert für die erste Lösung und hoffe, dass dieser Fix bald in der Hauptversion