Image filled even div set to object-fit: cover;

[LangRizkie]

http://imgur.com/3Zl6oRA | Pic 1
http://imgur.com/Wr006qF | Pic 2

Pic 1 is the div i want to capture, after it captured the image change its size *Pic 2.

Anyone could fix this ?

[LanderBeeuwsaert]

Hello, just to let you know that I needed this and hacked it to work in my project. I provide the code which works for me below. However this is a hack, I don't have the knowledge to integrate this into your project in a more proper way:

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

[ColinAmos]

Take LanderBeeuwsaert's solution (by downloading html2canvas.js so you can edit its code like they did) and replace

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

with

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

That should get you your desired results. It worked for me, at least.

[miwelc]

Any update on this?

[luisDanielRoviraContreras]

@LanderBeeuwsaert muchas gracias funciono perfecto , deberian agregarlo a la master es un muy buen aporte

[LanderBeeuwsaert]

@niklasvh Seems you've been updating the project.
I would be eager to get this one in. Let me know if you would need more exact code than this somehow.

[PetrovStark]

@LanderBeeuwsaert where do i suppose to implement this hack of yours?

[LanderBeeuwsaert]

@SamuraiPetrus
Hey, yeah, the structure of the project has been completely changed from 0.5 to 1.0.0 due to conversion to typescript.
I've searched a time ago where it should go in 1.0.0 so I coul possibly do a PR, but didn't find it. So I'm just still using 0.5 with this hack.

[diogocapela]

Use version 1.0.0-alpha.9 and add a patch-package with @LanderBeeuwsaert code like this one 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',

Don't forget to import the version that it is not minified by providing the full path:

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

[hyperjerk]

I cannot install the alpha build and patch-package isn't working for me. Is there not a way to get this implemented? It's the only thing stopping my app from being finished.

Suitable workaround for my situation is to just use background images.

[nurulalamador]

Hello, just to let you know that I needed this and hacked it to work in my project. I provide the code which works for me below. However this is a hack, I don't have the knowledge to integrate this into your project in a more proper way:

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

Where should i need to paste this code?

[canoncarlson]

After a bit of fiddling, I managed to get it to work for my purposes in the current version.

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

Search for the first few lines in the non-minified file. Thanks to @LanderBeeuwsaert for the base code.

[LanderBeeuwsaert]

@canoncarlson my pleasure, thanks for the update. We'll integrate it and be able to update in the coming weeks because of this.

[plavet]

I've managed to get it working also, change CanvasRenderer.prototype.renderReplacedElement in node_modules/html2canvas/dist/html2canvas.js around line 6274, I'm using RC 5 version, it is basically the same code as @canoncarlson, just to confirm that object-fit cover is working with this 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();
  }
};

Thanks to @LanderBeeuwsaert for initial solution, and hope this fix end up in main version soon.

[pavliukpetro]

Any updates on the issue?

[ENvironmentSet]

For someone who are hesitated to override files in node_modules because of their installation script running every single time the app deployed : use this tool to keep your monkey-patch to be persisted

[Kamlesh-62]

Where should i need to paste this code? I don't find any non-minified file

[ENvironmentSet]

@Kamlesh-62 if you have installed this module in node_modules, you may find non-minified file in following paths.

/node_modules/html2canvas/dist/html2canvas.esm.js
/node_modules/html2canvas/dist/html2canvas.js