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
Comments
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:
|
Take LanderBeeuwsaert's solution (by downloading html2canvas.js so you can edit its code like they did) and replace
with
That should get you your desired results. It worked for me, at least. |
Any update on this? |
@LanderBeeuwsaert muchas gracias funciono perfecto , deberian agregarlo a la master es un muy buen aporte |
@niklasvh Seems you've been updating the project. |
@LanderBeeuwsaert where do i suppose to implement this hack of yours? |
@SamuraiPetrus |
Use version 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'); |
I cannot install the alpha build and patch-package isn't working for me. Suitable workaround for my situation is to just use background images. |
Where should i need to paste this code? |
After a bit of fiddling, I managed to get it to work for my purposes in the current version.
Search for the first few lines in the non-minified file. Thanks to @LanderBeeuwsaert for the base code. |
@canoncarlson my pleasure, thanks for the update. We'll integrate it and be able to update in the coming weeks because of this. |
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. |
Any updates on the issue? |
For someone who are hesitated to override files in |
Where should i need to paste this code? I don't find any non-minified file |
@Kamlesh-62 if you have installed this module in
|
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 ?
The text was updated successfully, but these errors were encountered: