使用的html2canvas版本是1.0.0-rc.7

問題背景

當(dāng)要生成的html代碼中包含img標(biāo)簽，并且設(shè)置了object-fit:cover屬性后，通過html2canvas生成的圖片object-fit:cover屬性沒有生效，導(dǎo)致生成的圖片與通過樣式設(shè)置的不一樣。

解決方法

在項目中找到html2canvas源碼，路徑：/node_modules/html2canvas/dist/html2canvas.js，找到這個文件后，跳轉(zhuǎn)到6281行(1.0.0-rc.7版本，其他版本可能不太一樣)，找到CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image)這個方法的實現(xiàn)，修改為下面的代碼：

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();
            //     this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
            //     this.ctx.restore();
            // }
            // 上面注釋的原來的代碼，下面是我們自己修改后的
            // Start Custom Code
            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();
            }
            // End Custom Code
        };

這樣就大功告成了，保存后再測試就解決了生成的圖片與我們通過樣式設(shè)置的圖片不一樣的問題！

有用的話點個贊支持一下吧！??