Html2canvas: div가 object-fit: cover로 설정된 경우에도 이미지가 채워집니다.

안녕하세요, 저는 이것이 필요하고 제 프로젝트에서 작동하도록 해킹했음을 알려드립니다. 아래에서 저에게 맞는 코드를 제공합니다. 그러나 이것은 해킹입니다. 저는 이것을 보다 적절한 방식으로 프로젝트에 통합할 지식이 없습니다.

```
키: '그리기 이미지',
값: function 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를 사용하고 있습니다.

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');

알파 빌드를 설치할 수 없고 패치 패키지가 작동하지 않습니다. 이것을 구현하는 방법은 없나요?

내 상황에 적합한 해결 방법은 배경 이미지를 사용하는 것입니다.

안녕하세요, 저는 이것이 필요하고 제 프로젝트에서 작동하도록 해킹했음을 알려드립니다. 아래에서 저에게 맞는 코드를 제공합니다. 그러나 이것은 해킹입니다. 저는 이것을 보다 적절한 방식으로 프로젝트에 통합할 지식이 없습니다.

    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 과 동일한 코드입니다. 개체 맞춤 덮개가 이 수정과 함께 작동하는지 확인

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 에게 감사드리며 이 수정 사항이 곧 기본 버전으로 제공되기를 바랍니다.