Html2canvas: تم ملء الصورة حتى div مع ضبط الكائن على ملاءمة الكائن: غطاء ؛

مرحبًا ، فقط لأعلمك أنني بحاجة إلى هذا واخترقناه للعمل في مشروعي. أقدم الرمز الذي يناسبني أدناه. ومع ذلك ، يعد هذا اختراقًا ، فليس لدي المعرفة اللازمة لدمج هذا في مشروعك بطريقة أكثر ملاءمة:

""
المفتاح: "drawImage" ،
value: 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 أين أفترض تنفيذ هذا الاختراق الخاص بك؟

تضمين التغريدة
مرحبًا ، نعم ، تم تغيير هيكل المشروع بالكامل من 0.5 إلى 1.0.0 بسبب التحويل إلى الكتابة المطبوعة.
لقد قمت بالبحث منذ وقت مضى حيث يجب أن يكون الإصدار 1.0.0 ، لذا من المحتمل أن أقوم بعمل علاقات عامة ، لكنني لم أجدها. لذلك ما زلت أستخدم 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');

لا يمكنني تثبيت إصدار alpha وحزمة التصحيح لا تعمل معي. ألا توجد طريقة لتنفيذ ذلك؟

الحل المناسب لموقفي هو مجرد استخدام صور الخلفية.

مرحبًا ، فقط لأعلمك أنني بحاجة إلى هذا واخترقناه للعمل في مشروعي. أقدم الرمز الذي يناسبني أدناه. ومع ذلك ، يعد هذا اختراقًا ، فليس لدي المعرفة اللازمة لدمج هذا في مشروعك بطريقة أكثر ملاءمة:

    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 من دواعي سروري ، شكرا على التحديث. سنقوم بدمجه وسنكون قادرين على التحديث في الأسابيع المقبلة بسبب هذا.

لقد تمكنت من تشغيله أيضًا ، وتغيير CanvasRenderer.prototype.renderReplacedElement في node_modules / html2canvas / dist / html2canvas.js حول السطر 6274 ، وأنا أستخدم إصدار 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 للحل الأولي ، وآمل أن ينتهي هذا الإصلاح في الإصدار الرئيسي قريبًا.