Html2canvas: Gambar diisi bahkan div diatur ke objek-fit: cover;

Halo, hanya untuk memberi tahu Anda bahwa saya membutuhkan ini dan meretasnya agar berfungsi di proyek saya. Saya memberikan kode yang berfungsi untuk saya di bawah ini. Namun ini adalah peretasan, saya tidak memiliki pengetahuan untuk mengintegrasikan ini ke dalam proyek Anda dengan cara yang lebih tepat:

```
kunci: 'drawImage',
nilai: function drawImage(gambar, sumber, tujuan) {
/ MULAI KODE KUSTOM /

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

```

Ambil solusi LanderBeeuwsaert (dengan mengunduh html2canvas.js sehingga Anda dapat mengedit kodenya seperti yang mereka lakukan) dan ganti

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

dengan

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

Itu akan memberi Anda hasil yang Anda inginkan. Itu berhasil untuk saya, setidaknya.

Ada pembaruan tentang ini?

@LanderBeeuwsaert terima kasih banyak itu bekerja dengan sempurna, Anda harus menambahkannya ke master ini adalah kontribusi yang sangat bagus

@niklasvh Sepertinya Anda telah memperbarui proyek.
Saya ingin sekali memasukkan yang ini. Beri tahu saya jika Anda memerlukan kode yang lebih tepat daripada ini.

@LanderBeeuwsaert di mana saya harus mengimplementasikan peretasan Anda ini?

@SamuraiPetrus
Hei, ya, struktur proyek telah sepenuhnya diubah dari 0,5 menjadi 1,0.0 karena konversi ke TypeScript.
Saya telah mencari beberapa waktu lalu di mana seharusnya berada di 1.0.0 jadi saya mungkin bisa melakukan PR, tetapi tidak menemukannya. Jadi saya masih menggunakan 0.5 dengan hack ini.

Gunakan versi 1.0.0-alpha.9 dan tambahkan patch-package dengan kode @LanderBeeuwsaert seperti ini 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',

Jangan lupa untuk mengimpor versi yang tidak diperkecil dengan memberikan path lengkap:

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

Saya tidak dapat menginstal alpha build dan patch-package tidak berfungsi untuk saya. Apakah tidak ada cara untuk menerapkan ini?

Solusi yang cocok untuk situasi saya adalah dengan hanya menggunakan gambar latar belakang.

Halo, hanya untuk memberi tahu Anda bahwa saya membutuhkan ini dan meretasnya agar berfungsi di proyek saya. Saya memberikan kode yang berfungsi untuk saya di bawah ini. Namun ini adalah peretasan, saya tidak memiliki pengetahuan untuk mengintegrasikan ini ke dalam proyek Anda dengan cara yang lebih tepat:

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

Di mana saya harus menempelkan kode ini?

Setelah sedikit mengutak-atik, saya berhasil membuatnya berfungsi untuk tujuan saya di versi saat ini.

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

Cari beberapa baris pertama dalam file yang tidak diperkecil. Terima kasih kepada @LanderBeeuwsaert untuk kode dasarnya.

@canoncarlson dengan senang hati, terima kasih atas pembaruannya. Kami akan mengintegrasikannya dan dapat memperbaruinya dalam beberapa minggu mendatang karena hal ini.

Saya sudah berhasil membuatnya bekerja juga, ubah CanvasRenderer.prototype.renderReplacedElement di node_modules/html2canvas/dist/html2canvas.js di sekitar baris 6274, saya menggunakan versi RC 5, pada dasarnya kode yang sama dengan @canoncarlson , hanya untuk konfirmasikan bahwa penutup yang sesuai dengan objek berfungsi dengan modifikasi ini

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

Terima kasih kepada @LanderBeeuwsaert untuk solusi awal, dan semoga perbaikan ini segera berakhir di versi utama.