Html2canvas: 图像填充甚至 div 设置为 object-fit：cover；

你好，只是为了让你知道我需要这个并破解它以在我的项目中工作。 我在下面提供了对我有用的代码。 然而，这是一个 hack，我不知道以更合适的方式将它集成到您​​的项目中：

``
键：'绘制图像'，
值：函数drawImage（图像，源，目标）{
/开始自定义代码/

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

``

使用 LanderBeeuwsaert 的解决方案（通过下载 html2canvas.js 这样您就可以像他们一样编辑其代码）并替换

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

和

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

这应该会得到你想要的结果。 至少对我有用。

这事有进一步更新吗？

@LanderBeeuwsaert非常感谢你，它工作得很好，你应该把它添加到主人，这是一个很好的贡献

@niklasvh似乎您一直在更新项目。
我很想得到这个。让我知道你是否需要比这更精确的代码。

@LanderBeeuwsaert我想在哪里实施你的这个黑客？

@SamuraiPetrus
嘿，是的，由于转换为打字稿，项目的结构已从 0.5 完全更改为 1.0.0。
我曾经搜索过它应该在 1.0.0 中的位置，所以我可能会做一个 PR，但没有找到它。 所以我仍然使用 0.5 进行这个 hack。

使用版本1.0.0-alpha.9并添加patch-package和@LanderBeeuwsaert代码，如下所示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',

不要忘记通过提供完整路径导入未缩小的版本：

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

我无法安装 alpha 版本，补丁包对我不起作用。 没有办法实现这个吗？

适合我的情况的解决方法是仅使用背景图像。

你好，只是为了让你知道我需要这个并破解它以在我的项目中工作。 我在下面提供了对我有用的代码。 然而，这是一个 hack，我不知道以更合适的方式将它集成到您​​的项目中：

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

我应该在哪里粘贴此代码？

经过一番折腾，我设法让它在当前版本中达到我的目的。

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

在非缩小文件中搜索前几行。 感谢@LanderBeeuwsaert提供基本代码。

@canoncarlson我很高兴，感谢您的更新。 因此，我们将对其进行集成，并在未来几周内进行更新。

我也设法让它工作，在 6274 行附近更改 node_modules/html2canvas/dist/html2canvas.js 中的 CanvasRenderer.prototype.renderReplacedElement，我使用的是 RC 5 版本，它与@canoncarlson 的代码基本相同，只是为了确认 object-fit cover 正在使用此修改

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

感谢@LanderBeeuwsaert提供初始解决方案，并希望此修复程序尽快在主版本中结束。