Skip to content

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

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

Open
Tracked by #2904
LangRizkie opened this issue Feb 27, 2017 · 23 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 · 23 comments · May be fixed by #2904
Labels

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.

@petrusnog
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?

@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

@Iitianci
Copy link

Iitianci commented Jul 1, 2023

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.

Why did it change without any changes, the version number is 1.4.1

TechQuery added a commit to kaiyuanshe/kaiyuanshe.github.io that referenced this issue Jul 9, 2023
[fix] object-fit missing of html2canvas (niklasvh/html2canvas#1064)
@guansss
Copy link

guansss commented Nov 28, 2023

For those who don't bother to patch the package, here's a hack based on plavet's solution. Just create a patched canvas and pass it to html2canvas:

const root = document.body

// we need the scale to manually resize the canvas as well as passing it to html2canvas
const scale = window.devicePixelRatio

const canvas = document.createElement("canvas")
canvas.width = root.offsetWidth * scale
canvas.height = root.offsetHeight * scale

const ctx = canvas.getContext("2d")
const originalDrawImage = ctx.drawImage

ctx.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (image instanceof HTMLImageElement) {
    if (sw / dw < sh / dh) {
      const _dh = dh
      dh = sh * (dw / sw)
      dy = dy + (_dh - dh) / 2
    } else {
      const _dw = dw
      dw = sw * (dh / sh)
      dx = dx + (_dw - dw) / 2
    }
  }

  return originalDrawImage.call(ctx, image, sx, sy, sw, sh, dx, dy, dw, dh)
}

await html2canvas(root, {
  canvas,
  scale,
})

I'm not sure if this works in all cases though, it just worked well in my project.

Edit: this applies object-fit: cover to every image. If you change if (sw / dw < sh / dh) to if (dw / sw < dh / sh) it will instead apply object-fit: contain to every image.

@dimitrycastex
Copy link

For those who don't bother to patch the package, here's a hack based on plavet's solution. Just create a patched canvas and pass it to html2canvas:

const root = document.body

// we need the scale to manually resize the canvas as well as passing it to html2canvas
const scale = window.devicePixelRatio

const canvas = document.createElement("canvas")
canvas.width = root.offsetWidth * scale
canvas.height = root.offsetHeight * scale

const ctx = canvas.getContext("2d")
const originalDrawImage = ctx.drawImage

ctx.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (image instanceof HTMLImageElement) {
    if (sw / dw < sh / dh) {
      const _dh = dh
      dh = sh * (dw / sw)
      dy = dy + (_dh - dh) / 2
    } else {
      const _dw = dw
      dw = sw * (dh / sh)
      dx = dx + (_dw - dw) / 2
    }
  }

  return originalDrawImage.call(ctx, image, sx, sy, sw, sh, dx, dy, dw, dh)
}

await html2canvas(root, {
  canvas,
  scale,
})

I'm not sure if this works in all cases though, it just worked well in my project.

I think there are a mistake in if (sw / dw < sh / dh) , I replace with if (dw / sw < dh / sh) and works for object-fit

@guansss
Copy link

guansss commented Dec 14, 2023

@dimitrycastex actually the original code works for object-fit: cover only, and changing it to if (dw / sw < dh / sh) works for object-fit: contain only. Added a note for that.

There seems no simple patch or hack that works for both. Using a fork like in #2904 would be better.

@armanrozika
Copy link

For those who don't bother to patch the package, here's a hack based on plavet's solution. Just create a patched canvas and pass it to html2canvas:

const root = document.body

// we need the scale to manually resize the canvas as well as passing it to html2canvas
const scale = window.devicePixelRatio

const canvas = document.createElement("canvas")
canvas.width = root.offsetWidth * scale
canvas.height = root.offsetHeight * scale

const ctx = canvas.getContext("2d")
const originalDrawImage = ctx.drawImage

ctx.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (image instanceof HTMLImageElement) {
    if (sw / dw < sh / dh) {
      const _dh = dh
      dh = sh * (dw / sw)
      dy = dy + (_dh - dh) / 2
    } else {
      const _dw = dw
      dw = sw * (dh / sh)
      dx = dx + (_dw - dw) / 2
    }
  }

  return originalDrawImage.call(ctx, image, sx, sy, sw, sh, dx, dy, dw, dh)
}

await html2canvas(root, {
  canvas,
  scale,
})

I'm not sure if this works in all cases though, it just worked well in my project.

Edit: this applies object-fit: cover to every image. If you change if (sw / dw < sh / dh) to if (dw / sw < dh / sh) it will instead apply object-fit: contain to every image.

ahhh finally something that worked!

@Tekknoman
Copy link

For those who don't bother to patch the package, here's a hack based on plavet's solution. Just create a patched canvas and pass it to html2canvas:

const root = document.body

// we need the scale to manually resize the canvas as well as passing it to html2canvas
const scale = window.devicePixelRatio

const canvas = document.createElement("canvas")
canvas.width = root.offsetWidth * scale
canvas.height = root.offsetHeight * scale

const ctx = canvas.getContext("2d")
const originalDrawImage = ctx.drawImage

ctx.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (image instanceof HTMLImageElement) {
    if (sw / dw < sh / dh) {
      const _dh = dh
      dh = sh * (dw / sw)
      dy = dy + (_dh - dh) / 2
    } else {
      const _dw = dw
      dw = sw * (dh / sh)
      dx = dx + (_dw - dw) / 2
    }
  }

  return originalDrawImage.call(ctx, image, sx, sy, sw, sh, dx, dy, dw, dh)
}

await html2canvas(root, {
  canvas,
  scale,
})

I'm not sure if this works in all cases though, it just worked well in my project.

Edit: this applies object-fit: cover to every image. If you change if (sw / dw < sh / dh) to if (dw / sw < dh / sh) it will instead apply object-fit: contain to every image.

Thank you for this. I took the liberty and modified it to handle the properties set on the original image. This is a verry hacky way to do it I guess but it works for my project.
I am first creating a map of all images on the page with the image src as key. (There might be a better way to identify the img elements, since in some cases you might have images with the same src but different properties on the same page)
Then I use this map to get the object-fit and object-position properties so I can then determine how I want to manipulate the dimensions.
Anyways here is my implementation hope this helps someone:

 const root = document.body;

const customCanvas = document.createElement('canvas');
const scale = window.devicePixelRatio;
customCanvas.width = 1920 * scale;
customCanvas.height = 1080 * scale;

const ctx = customCanvas.getContext('2d');
const originalDrawImage = ctx.drawImage;

const images: { [key: string]: HTMLImageElement } = Array.from(root.getElementsByTagName('img')).reduce(
  (map, img) => {
    map[img.src] = img;
    return map;
  },
  {} as { [key: string]: HTMLImageElement },
);

ctx.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (image instanceof HTMLImageElement) {
    const objectFit = images[image.src].style.objectFit || 'fill'; // Default to 'fill'
    const objectPosition = images[image.src].style.objectPosition || 'center center'; // Default to 'center center'
    sh = image.height;
    sw = image.width;

    const sourceRatio = sw / sh;
    const destinationRatio = dw / dh;

    // Parse objectPosition to determine alignment
    let [horizontalPosition, verticalPosition] = objectPosition.split(' ');
    if (!verticalPosition) {
      // If only one value is provided, use it for both directions
      verticalPosition = horizontalPosition;
    }

    // Adjust source dimensions and positions based on object-fit
    switch (objectFit) {
      case 'cover':
        if (sourceRatio > destinationRatio) {
          const newSw = sh * destinationRatio;
          let offsetX = (sw - newSw) / 2; // Default center
          if (horizontalPosition === 'left') offsetX = 0;
          if (horizontalPosition === 'right') offsetX = sw - newSw;
          sx += offsetX;
          sw = newSw;
        } else {
          const newSh = sw / destinationRatio;
          let offsetY = (sh - newSh) / 2; // Default center
          if (verticalPosition === 'top') offsetY = 0;
          if (verticalPosition === 'bottom') offsetY = sh - newSh;
          sy += offsetY;
          sh = newSh;
        }
        break;
      case 'contain':
        if (sourceRatio > destinationRatio) {
          const newDh = dw / sourceRatio;
          let offsetY = (dh - newDh) / 2; // Default center
          if (verticalPosition === 'top') offsetY = 0;
          if (verticalPosition === 'bottom') offsetY = dh - newDh;
          dy += offsetY;
          dh = newDh;
        } else {
          const newDw = dh * sourceRatio;
          let offsetX = (dw - newDw) / 2; // Default center
          if (horizontalPosition === 'left') offsetX = 0;
          if (horizontalPosition === 'right') offsetX = dw - newDw;
          dx += offsetX;
          dw = newDw;
        }
        break;
      case 'fill':
        // No adjustments needed for object-position
        break;
      // Implement other object-fit values if needed
    }
  }

  return originalDrawImage.call(ctx, image, sx, sy, sw, sh, dx, dy, dw, dh);
};

const canvas = await html2canvas(root, {
  canvas: customCanvas,
  windowHeight: 1080,
  windowWidth: 1920,
});

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

Successfully merging a pull request may close this issue.