Html2canvas: Image remplie même div réglé sur l'ajustement de l'objet : couverture ;

Bonjour, juste pour vous faire savoir que j'en avais besoin et que je l'ai piraté pour fonctionner dans mon projet. Je fournis le code qui fonctionne pour moi ci-dessous. Cependant, il s'agit d'un hack, je n'ai pas les connaissances nécessaires pour l'intégrer dans votre projet de manière plus appropriée :

```
clé : 'drawImage',
valeur : fonction drawImage(image, source, destination) {
/ START CODE PERSONNALISÉ /

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

```

Prenez la solution de LanderBeeuwsaert (en téléchargeant html2canvas.js pour pouvoir éditer son code comme ils l'ont fait) et remplacez

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

avec

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

Cela devrait vous donner les résultats souhaités. Cela a fonctionné pour moi, au moins.

Une mise à jour pour ceci?

@LanderBeeuwsaert merci beaucoup cela a fonctionné parfaitement, vous devriez l'ajouter au master c'est une très bonne contribution

@niklasvh Il semble que vous ayez mis à jour le projet.
Je serais impatient d'obtenir celui-ci. Faites-moi savoir si vous auriez besoin d'un code plus exact que celui-ci d'une manière ou d'une autre.

@LanderBeeuwsaert où dois-je supposer implémenter ce hack ?

@SamuraiPetrus
Hé, oui, la structure du projet a été complètement changée de 0.5 à 1.0.0 en raison de la conversion en tapuscrit.
J'ai cherché il y a quelque temps où cela devrait aller dans la 1.0.0, donc je pourrais éventuellement faire un PR, mais je ne l'ai pas trouvé. J'utilise donc toujours 0.5 avec ce hack.

Utilisez la version 1.0.0-alpha.9 et ajoutez un patch-package avec le code @LanderBeeuwsaert comme celui-ci 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',

N'oubliez pas d'importer la version qu'elle n'est pas minifiée en fournissant le chemin complet :

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

Je ne peux pas installer la version alpha et le package de correctifs ne fonctionne pas pour moi. N'y a-t-il pas un moyen de mettre cela en œuvre?

La solution de contournement appropriée à ma situation consiste à utiliser simplement des images d'arrière-plan.

Bonjour, juste pour vous faire savoir que j'en avais besoin et que je l'ai piraté pour fonctionner dans mon projet. Je fournis le code qui fonctionne pour moi ci-dessous. Cependant, il s'agit d'un hack, je n'ai pas les connaissances nécessaires pour l'intégrer dans votre projet de manière plus appropriée :

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

Où dois-je coller ce code ?

Après un peu de bricolage, j'ai réussi à le faire fonctionner pour mes besoins dans la version actuelle.

        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();
        }
    };

Recherchez les premières lignes du fichier non-minifié. Merci à @LanderBeeuwsaert pour le code de base.

@canoncarlson mon plaisir, merci pour la mise à jour. Nous l'intégrerons et pourrons mettre à jour dans les semaines à venir à cause de cela.

J'ai réussi à le faire fonctionner aussi, changez CanvasRenderer.prototype.renderReplacedElement dans node_modules/html2canvas/dist/html2canvas.js vers la ligne 6274, j'utilise la version RC 5, c'est fondamentalement le même code que @canoncarlson , juste pour confirmer que la couverture adaptée à l'objet fonctionne avec cette modification

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();
  }
};

Merci à @LanderBeeuwsaert pour la solution initiale, et espérons que ce correctif se retrouvera bientôt dans la version principale.