Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #2904
LangRizkie opened this issue Feb 27, 2017 · 17 comments · May be fixed by #2904
Open
Tracked by #2904

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

LangRizkie opened this issue Feb 27, 2017 · 17 comments · May be fixed by #2904
Labels
Projects

Comments

@LangRizkie
Copy link

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
Copy link

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
Copy link

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
Copy link

miwelc commented Dec 19, 2018

Any update on this?

@luisDanielRoviraContreras

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

@LanderBeeuwsaert
Copy link

@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
Copy link

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

@LanderBeeuwsaert
Copy link

LanderBeeuwsaert commented Oct 17, 2019

@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
Copy link

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
Copy link

hyperjerk commented Sep 10, 2020

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
Copy link

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
Copy link

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
Copy link

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

@plavet
Copy link

plavet commented Nov 23, 2020

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
Copy link

Any updates on the issue?

junhoyeo added a commit to inevitable-dao/html2canvas that referenced this issue Mar 31, 2022
@c0r32 c0r32 linked a pull request Jun 16, 2022 that will close this issue
2 tasks
@ENvironmentSet
Copy link

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

lemonyte added a commit to lemonyte/http-waifus that referenced this issue Sep 9, 2022
@Kamlesh-62
Copy link

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

@ENvironmentSet
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Backlog
Awaiting triage
Development

Successfully merging a pull request may close this issue.