Html2canvas: चित्र भरा हुआ div भी ऑब्जेक्ट-फिट पर सेट है: कवर;

हैलो, बस आपको यह बताने के लिए कि मुझे इसकी आवश्यकता है और इसे अपने प्रोजेक्ट में काम करने के लिए हैक कर लिया। मैं वह कोड प्रदान करता हूं जो नीचे मेरे लिए काम करता है। हालाँकि यह एक हैक है, मेरे पास इसे आपके प्रोजेक्ट में अधिक उचित तरीके से एकीकृत करने का ज्ञान नहीं है:

```
कुंजी: 'ड्राइमेज',
मान: फ़ंक्शन ड्राइमेज (छवि, स्रोत, गंतव्य) {
/ कस्टम कोड प्रारंभ करें /

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

मैं अल्फा बिल्ड स्थापित नहीं कर सकता और पैच-पैकेज मेरे लिए काम नहीं कर रहा है। क्या इसे लागू करने का कोई तरीका नहीं है?

मेरी स्थिति के लिए उपयुक्त समाधान केवल पृष्ठभूमि छवियों का उपयोग करना है।

हैलो, बस आपको यह बताने के लिए कि मुझे इसकी आवश्यकता है और इसे अपने प्रोजेक्ट में काम करने के लिए हैक कर लिया। मैं वह कोड प्रदान करता हूं जो नीचे मेरे लिए काम करता है। हालाँकि यह एक हैक है, मेरे पास इसे आपके प्रोजेक्ट में अधिक उचित तरीके से एकीकृत करने का ज्ञान नहीं है:

    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 के लिए धन्यवाद, और आशा है कि यह फिक्स जल्द ही मुख्य संस्करण में समाप्त हो जाएगा।