html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

fix for apply object-fit

Open marjoriedieusart opened this issue 3 years ago • 10 comments

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/html2canvas/.DS_Store b/node_modules/html2canvas/.DS_Store
new file mode 100644
index 0000000..c6eeb31
Binary files /dev/null and b/node_modules/html2canvas/.DS_Store differ
diff --git a/node_modules/html2canvas/dist/html2canvas.js b/node_modules/html2canvas/dist/html2canvas.js
index 210184e..191320c 100644
--- a/node_modules/html2canvas/dist/html2canvas.js
+++ b/node_modules/html2canvas/dist/html2canvas.js
@@ -6282,13 +6282,30 @@
             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();
-                this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
+          
+                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();
             }
-        };
+          };
         CanvasRenderer.prototype.renderNodeContent = function (paint) {
             return __awaiter(this, void 0, void 0, function () {
                 var container, curves, styles, _i, _a, child, image, e_1, image, e_2, iframeRenderer, canvas, size, bounds, x, textBounds, img, image, url, e_3, bounds;

This issue body was partially generated by patch-package.

marjoriedieusart avatar May 31 '21 08:05 marjoriedieusart

What was the issue you were having?

kinoli avatar Jun 01 '21 03:06 kinoli

@kinoli the object-fit property doesn't work on images, this seems to be its fix. Linked to this issue

pagarevijayy avatar Jun 09 '21 17:06 pagarevijayy

Is there any chance this fix will be incorporated soon?

GregSmith92 avatar Sep 24 '21 13:09 GregSmith92

Is there any update now?

ExcitedSpider avatar Oct 11 '21 08:10 ExcitedSpider

bump

michaelkoelewijn91 avatar Nov 29 '21 13:11 michaelkoelewijn91

bump

entropygeneration avatar Mar 16 '23 01:03 entropygeneration

+1

CHEWX avatar Mar 16 '23 14:03 CHEWX

+1 need this fix

lordlpua avatar May 18 '23 12:05 lordlpua

Safari still not working

plHuan455 avatar Apr 10 '24 16:04 plHuan455