Html2canvas: toDataURL . के माध्यम से उत्पन्न छवि के रिज़ॉल्यूशन को बढ़ाने का तरीका

मुझे पता है कि इस बारे में अन्य मुद्दों/अनुरोधों में किसी बिंदु पर बात हुई थी और किसी ने पुल अनुरोध सबमिट किया था, लेकिन मैंने कभी भी पुल अनुरोधों को विलय नहीं देखा।

मेरे पास एक कार्य विधि है जिसका उपयोग हम डिवाइस पिक्सेल घनत्व की जांच के लिए करते हैं। लेकिन इससे प्रदर्शन पर असर पड़ सकता है। इसके बजाय शायद हम इसे उच्च डीपीआई के साथ प्रस्तुत करने के लिए कहने के लिए एक पैरामीटर रखना चाहते हैं?

@missing हाँ डीपीआई निर्दिष्ट करने के लिए एक पैरामीटर कमाल होगा।

इसके अलावा, अगर आपको डिवाइस पिक्सेल घनत्व के लिए कार्य पद्धति को साझा करने में कोई आपत्ति नहीं है, तो यह अच्छा होगा। मेरा प्राथमिक आवेदन अधिकतम 50-ईश शर्तों के शब्द क्लाउड का पीएनजी निर्यात करना है। इसलिए मैं इस पर प्रदर्शन हिट से बहुत चिंतित नहीं हूं।

क्या यह आपकी समस्या है छवि की गुणवत्ता या एक धुंधला प्रभाव है (कुछ उदाहरणों में कुछ छवियां html2canvas द्वारा धुंधली प्रभाव से उत्पन्न होती हैं)?

@brcontainer मुझे लगता है कि छवि की गुणवत्ता समस्या है। मुझे लगता है। जैसे १००% ज़ूम करने पर तस्वीर ठीक-ठाक-ईश दिखती है। लेकिन जैसे ही मैं 5% भी ज़ूम करता हूँ आप फोटो की गुणवत्ता में ध्यान देने योग्य गिरावट देख सकते हैं। कृपया संलग्न छवि देखें।

रनटाइम पर समस्या का उदाहरण देखकर मैं केवल कुछ सुनिश्चित कर सकता हूं।

http://jsfiddle.net/ का उपयोग करके उसी स्थान पर प्रयास करें, और यहां लिंक पोस्ट करें।

[संपादित करें]
मौका है कि आप html2canvas द्वारा जेनरेट किए गए कैनवास में _zoom_ लागू करने का प्रयास कर रहे हैं, आप (छवि के रूप में सहेजने से पहले) का उपयोग करने का प्रयास कर सकते हैं:

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

आपको कामयाबी मिले

नमस्ते,

हमें 96DPI से अधिक रिज़ॉल्यूशन की आवश्यकता है। हमें 300 डीपीआई की तरह और चाहिए।

क्या यह _possible_ html2canvas के साथ भी किया जा सकता है?

छवि पर धुंधलापन के साथ हमारे पास एक ही समस्या है। हमें किसी भी समाधान की आवश्यकता है, जो हमारे धुंधलेपन को दूर करे, और हमें एक अच्छा दिखने वाला डीपीआई प्रदान करे।

यह कैसे किया जा सकता है, या उसी प्रभाव को प्राप्त करने के किसी वैकल्पिक तरीके पर कोई विचार/सुझाव?

धन्यवाद

@brcontainer मैं अभी आपका संपादन

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

गलत क्रम में है, आपको छवि का आकार बदलने से पहले "ImageSmoothingEnabled" लागू करना होगा।

अपने कोड का एक नमूना http://jsfiddle.net में डालें और मैं इसे संपादित करने का प्रयास करूंगा

हाय दोस्तों,

मैं toDataURL की 96dpi बाधा के बिना उच्च रिज़ॉल्यूशन वाली छवियां अपलोड करना चाहता हूं। चूँकि toDataURLHD अभी तक उपलब्ध नहीं है, मैं अपने सपने को कैसे साकार कर सकता हूँ? :-)

किसी भी संकेत के लिए अग्रिम धन्यवाद

@brcontainer मुझे यकीन नहीं है कि मैं समझता हूं कि आकार बदलने से पहले चिकनाई लगाने से आपका क्या मतलब है, क्योंकि मैं छवि का आकार बदल नहीं रहा हूं। किसी भी स्थिति में मैंने आपके लिए http://jsfiddle.net/tankchintan/92mra/4/ देखने के लिए एक jsfiddle बनाया है।

वास्तव में इसे हल करने के लिए उत्सुक हैं! :)

दोस्त आप भ्रमित कर रहे हैं, toDataURL जिसे आकार बदलना है, आपको CANVAS का आकार बदलना होगा।
मैं एक उदाहरण बनाने की कोशिश कर रहा हूं, लेकिन फिर भी यह काम नहीं कर सका।

नमस्ते,

मैं बेहतर छवि गुणवत्ता के लिए इन सुझावों का पालन करने का प्रयास कर रहा हूं, और यह मेरे लिए भी स्पष्ट नहीं है।

brcontainer, क्या यह संभव है कि आप जिन विचारों के बारे में बात कर रहे हैं, उनके साथ आप टैंकचिंतन द्वारा बनाई गई जेएस पहेली को स्पष्ट कर सकते हैं, या बदल सकते हैं/बना सकते हैं? यह मेरे लिए कोई मतलब नहीं है, भले ही हम 2x आकार में एक छवि बनाते हैं, छवि में पिक्सेलेशन तब भी बना रहता है जब हम छवि को 192 डीपीआई में परिवर्तित करते हैं।

नमस्ते दोस्तों, क्या इस मुद्दे पर कोई और प्रतिक्रिया है? मैं PhantomJS जैसी किसी चीज़ की तुलना में html2canvas के साथ बेहद प्रो इमेज क्वालिटी का अनुभव कर रहा हूं, जहां आप गुणवत्ता/रिज़ॉल्यूशन बढ़ाने के लिए zoomFactor (अन्य ट्वीक्स के बीच) सेट कर सकते हैं।

मेरा भी वही मुद्दा है। मुझे पीडीएफ दस्तावेज़ में वेब पेज का एक स्नैपशॉट प्राप्त करने की आवश्यकता है जिसके लिए मैं अपने div को एक छवि में बदलने के लिए html2canvas का उपयोग कर रहा हूं और फिर मैं छवि को पीडीएफ में जोड़ने के लिए iTextsharp का उपयोग करता हूं। हालाँकि, उत्पन्न छवि थोड़ी धुंधली प्रतीत होती है और इसे लगातार देखने के लिए आंखों पर मुश्किल हो जाती है। मैं जानना चाहता हूं कि क्या मैं html2canvas में ही समय बनाने पर निर्दिष्ट रिज़ॉल्यूशन की एक छवि बना सकता हूं।

नमस्ते,
मेरे पास ऊपर के समान ही आवश्यकता है। और वही समस्या जिसका मैं सामना कर रहा हूं।
"पीडीएफ दस्तावेज़ में वेब पेज का एक स्नैपशॉट प्राप्त करना जिसके लिए मैं अपने डिव को एक छवि में बदलने के लिए html2canvas का उपयोग कर रहा हूं और फिर छवि को एक पीडीएफ में जोड़ रहा हूं।"
हालाँकि, उत्पन्न छवि थोड़ी धुंधली प्रतीत होती है।

मैंने उपरोक्त सुझावों का पालन किया लेकिन फिर भी मुझे एक धुंधली छवि मिल रही है।
यहाँ मेरे कोड में: html2canvas वेबपेज का स्नैपशॉट उत्पन्न करता है जो सिस्टम रिज़ॉल्यूशन पर आधारित है।
मुझे सिस्टम रिज़ॉल्यूशन के आधार पर विभिन्न आकारों में एक ही वेबपेज "स्नैपशॉट" मिल रहा है।

उदाहरण :
छवि का आकार: 816x422
छवि का आकार:1193x437
छवि का आकार: 1275x437
यहां मेरी अपेक्षा है: 2000 x 1784 आयाम और ऊपर।

क्या छवि का यह आयाम प्राप्त करना संभव है।
कृपया अपने बहुमूल्य सुझाव दें और अपने बहुमूल्य समय के लिए धन्यवाद।

इसके लिए +1। पीडीएफ में डालने के लिए html2canvas के साथ एक छवि प्राप्त करना चाहते हैं, लेकिन एक धुंधली गुणवत्ता प्राप्त करना।

क्या आपने उस तत्व के लिए एक पेरेंट नोड पर सीएसएस ट्रांसफ़ॉर्म मैट्रिक्स का उपयोग करने की कोशिश की है जिसे आप उच्च रिज़ॉल्यूशन पर निर्यात करना चाहते हैं? यह मेरे लिए काम करता है। जैसे "ट्रांसफॉर्म: स्केल (2, 2)"

@mudcube ने मेरे लिए आंशिक रूप से काम किया

@brcontainer यह मेरे लिए ठीक काम कर रहा है

क्या कोई समाधान मिला है ?? कृपया साझा करें कि धुंधली छवि के रिज़ॉल्यूशन को कैसे बढ़ाया जाए, मुझे इसका एक पीडीएफ बनाना है

+1 क्या इसके लिए अभी तक कोई समाधान/दिशानिर्देश है?

कोई समाधान मिला?

दोस्तों, transform: scale(2, 2) यह काम करता है।

क्या आप अधिक विवरण प्रदान कर सकते हैं?

@matiasinsaurralde स्क्रीन शॉट बनाने से ठीक पहले सीएसएस वर्ग .x2 जिसमें ऊपर से तत्व में सीएसएस नियम शामिल है, फिर उस वर्ग को html2canvas कॉलबैक में हटा दें। आपको डबल-साइज़ एलिमेंट और डबल-साइज़ स्क्रीनशॉट भी मिलेगा। और यह निर्बाध है इसलिए आप किसी भी आकार बदलने की संभावना नहीं देखेंगे।

स्क्रीनशॉट जब मैंने आपके सुझाव @Ajaxy का पालन करने का प्रयास किया। मुझे लगता है कि समस्या मेरे कोड पर है? पृष्ठ को प्रस्तुत करने में इतना समय लगा

पैमाने ने मेरे लिए संकल्प में वृद्धि नहीं की। इसे जेएस के साथ हल करना था -
https://github.com/niklasvh/html2canvas/issues/379

कोई किस्मत दोस्तों?

transform: scale(2, 2); dygraph.js के लिए भी समाधान नहीं है

@premerddyn , लिंक किए गए मुद्दे में मेरा समाधान देखें।
यह अच्छी तरह से काम कर रहा है, लेकिन स्क्रीनशॉट से पहले इज़ाफ़ा की आवश्यकता है।
अगर मेरी टिप्पणी स्पष्ट नहीं है तो मैं और स्पष्टीकरण जोड़ूंगा

अच्छी तरह से मैंने जो किया था वह दो बार आकार का div बना दिया है और इसे दृश्यता पतन बना दिया है और मेरे पास जो भी सामग्री है, मैंने उस div पर पोस्ट किया और एक स्क्रीनशॉट लिया। इस तरह कोई छवि स्पष्टता हानि नहीं है और मैंने इसे बनाने के लिए कुछ फ़ॉन्ट आकार कोड को ट्वीक किया है काम। मुझे यह ठीक काम कर रहा है। लेकिन मेरी समस्या टेक्स्ट-स्ट्रोक और मल्टीलाइन टेक्स्ट-बैकग्राउंड के साथ है।

मेरे लिए 2 कामों से स्केलिंग, हालांकि, मुझे लगता है कि प्रतिपादन विंडो रिज़ॉल्यूशन/आकार द्वारा सीमित है। यदि स्केल किया गया div खिड़की से चौड़ा है, तो उसका कुछ हिस्सा काट दिया जाएगा

तो, क्या स्क्रीन से बड़े कैनवस को कैप्चर करने का कोई तरीका नहीं है?

आह, इस धागे से:

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

मैंने इस उदाहरण में उच्च रिज़ॉल्यूशन वाली चीज़ हासिल करने की कोशिश की, लेकिन वह नहीं मिली ...

डाउनलोड pngx2 बटन पर क्लिक करें..

क्या बैकएंड पर ऑपरेशन करना संभव है जैसे जब बटन पर क्लिक किया जाता है तो कैनवास अपने आकार से दोगुना हो जाता है और फिर तस्वीर खींची जाती है और फिर कैनवास को नियमित आकार में वापस ले जाया जाता है ..

ज़रूर, आप ऐसा कर सकते थे। मैं जिस आकार का उपयोग करना चाहता हूं उसका कैनवास ट्रिगर करता हूं
कोड प्रदान किया गया। मैंने पाया कि मूल्य प्राप्त करना गलत हो सकता है, इसलिए मैं बस
चौड़ाई/ऊंचाई सीधे सेट करें।

शनिवार, मई ७, २०१६ को, आनंद दिन के नोटिफिकेशन @github.com ने लिखा:

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

मैंने इस उदाहरण में उच्च रिज़ॉल्यूशन वाली चीज़ हासिल करने की कोशिश की, लेकिन नहीं मिला
वह...

डाउनलोड pngx2 बटन पर क्लिक करें..

क्या बैकएंड पर ऑपरेशन करना संभव है जैसे जब बटन क्लिक किया जाता है
कैनवास अपने आकार से दोगुना हो जाता है और फिर तस्वीर खींची जाती है और फिर से
कैनवास को नियमित आकार में वापस ले जाया जाता है..

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

दुनिया का सबसे लंबा चल रहा चित्रण
ForeverScape.com http://www.foreverscape.com/ | @ फॉरएवरस्केप
https://twitter.com/foreverscape | गीथूब पर
https://github.com/vance/foreverscapecore | खबर में
http://www.foreverscape.com/art/reviews/

@vance क्या आप इसे jsfiddle उदाहरण में सेट कर सकते हैं?

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

मैंने कोशिश की लेकिन यह मेरे द्वारा सेट नहीं किया जा रहा है।

आप इसे पूरी तरह से संपादित कर सकते हैं या नया बना सकते हैं।

यह बहुतों के लिए मददगार होगा :नर्तक:

मैंने इसे जल्दी से नकल करने की कोशिश की लेकिन परीक्षण div को ठीक करने का समय नहीं था। transform:scale() साथ कुछ कैप्चर करना कुछ भी नहीं करता है क्योंकि div की आंतरिक ऊंचाई _NOT_ प्रभावित होती है। इसलिए यह एक परिवर्तन है। यह w/h गुण अपरिवर्तित (आंतरिक रूप से) हैं, जिसे आप getBoundingClientRect() प्राप्त करके परीक्षण कर सकते हैं। माता-पिता के संदर्भ में देखे जाने पर इसकी चौड़ाई/ऊंचाई केवल _actually_ बदल जाती है। स्केल किए जाने के बाद आपको कंटेनर div को पकड़ना होगा।

https://jsfiddle.net/jano9ao4/1/

मैं एक ही समस्या का सामना करता हूं, क्या कोई व्यावहारिक समाधान है?ヾ(´･ )ノ"

मैं खिड़की से बड़े तत्वों को पकड़ने के लिए इसे काम करने में सक्षम था। बस याद रखें, आप केवल एक रूपांतरित तत्व से "बड़ी" छवि प्राप्त नहीं कर सकते, क्योंकि (स्वयं के लिए), इसमें अभी भी समान आयाम हैं।

मुझे एक आईफ्रेम में मेरा काम करना था और बेस 64 डेटा को एक संदेश के रूप में वापस भेजना था ...

टिप्पणियों के साथ फिर से:

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

मैंने html2canvas का उपयोग करके HTML तत्व से उच्च-DPI स्क्रीनशॉट आसानी से प्राप्त करने के लिए निम्न फ़ंक्शन लिखा है।

• यदि ऊंचाई या चौड़ाई सीमित है (उदाहरण के लिए शरीर की एक निश्चित चौड़ाई है), प्रसंस्करण के दौरान बाधाओं को हटा दिया जाना चाहिए - स्रोत तत्व वांछित पैमाने तक बढ़ने में सक्षम होना चाहिए
• srcEl एक मौजूदा तत्व होना चाहिए
• destIMG एक मौजूदा (खाली) छवि तत्व होना चाहिए
• dpi 96 . का गुणज होना चाहिए

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

उपयोग:

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

क्या आपने पाया कि ऐसा करने से window.onresize ईवेंट हैंडलर भी टूट जाते हैं? इस कारण से, मुझे यह सब एक आईफ्रेम के अंदर करना पड़ा और सामग्री को वापस करने के लिए parent.window.postMessage(data) का उपयोग करके परिणाम वापस पोस्ट करना पड़ा। यह केवल मेरे लिए मायने रखता है क्योंकि यह एक मोबाइल ऐप है, और आग का आकार बदलना महत्वपूर्ण है।

@vance : मेरे मामले में मुझे इनमें से किसी भी चीज़ की आवश्यकता नहीं है या उपयोग नहीं है - मैं वास्तव में इसका उपयोग HTML-to-PDF रेंडरर में बग के आसपास काम करने के लिए कर रहा हूं। मुझे आपकी विधि का पूरा उदाहरण देखना अच्छा लगेगा, यह अधिक लचीला लगता है।

मैंने एक उच्च रिज़ॉल्यूशन वाली छवि प्राप्त करने का एक और तरीका निकाला, जिसे शरीर का आकार बदलने की आवश्यकता नहीं है। हालांकि, इसे html2canvas (#790, #820, #893, #922, आदि) में बग के कारण स्रोत तत्व को पूरी तरह से स्थान देना होगा। @MisterLamb के रेटिना कोड के आधार पर।

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

उपयोग:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

संपादित करें: वास्तव में तत्व को स्थानांतरित करने और मार्जिन समायोजित करने के बजाय पूर्ण स्थिति का उपयोग करके कम हैकनेस, सुझाव के लिए @ जेसन-ओ-मैटिक के लिए धन्यवाद।

यह नवीनतम संस्करण (0.5.0-अल्फा) के साथ काम करता है। लेकिन 0.4.1 . नहीं

यदि आप इस समस्या को 0.4.1 में हल करना चाहते हैं, तो आपको कैनवास के आकार के साथ खेलना होगा।

@airdrummingfool के फिक्स (जो बहुत अच्छा काम करता है) का उपयोग करने वाले किसी भी व्यक्ति के लिए बस एक त्वरित नोट ...

आपके पास कोई भी "रिश्तेदार" तत्व नहीं हो सकता है जो उस तत्व को लपेटता है जिसे आप स्क्रीन डंप करना चाहते हैं इससे कोई फर्क नहीं पड़ता कि वे कितनी दूर xtree हैं। स्क्रीनडंप की अवधि के लिए उन्हें स्थिर पर स्विच करने की आवश्यकता है ताकि आप जो तत्व चाहते हैं वह वास्तव में खिड़की के सापेक्ष 0,0 पर दिखाई दे, न कि आसपास के डीआईवी।

इसे काम करने में मुझे कई घंटे लगे, इसलिए मुझे आशा है कि इससे किसी को उन्हीं समस्याओं से बचने में मदद मिलेगी।

शुभ दोपहर मित्रों,
क्या किसी के पास @airdrummingfool समाधान का jsfiddle है, मैं इसे अपने प्रोजेक्ट में बिना किसी किस्मत के लागू करने की कोशिश कर रहा हूं। एक कामकाजी उदाहरण मेरे लिए यह समझने के लिए बहुत अच्छा होगा कि यह कैसे काम करता है और मेरी परियोजना में इसे लागू करने की कोशिश में मेरी बहुत मदद करेगा।

प्रदान की जा सकने वाली किसी भी सहायता के लिए बहुत-बहुत धन्यवाद।

हेलो सब लोग! मैं @airdrummingfool समाधान का उपयोग करने का प्रयास कर रहा हूं। लेकिन मुझे एक कष्टप्रद त्रुटि मिलती है। जिस तत्व से मैं छवि प्राप्त करना चाहता हूं, उसके अंदर एक है तत्व और प्रक्रिया करते समय, आईएमजी तत्व खाली हो जाता है और स्रोत को अनदेखा कर दिया जाता है। क्या आप जानते हैं कि मैं इसे कैसे हल कर सकता हूं? क्या किसी ने html2canvas के साथ पहले इस मुद्दे का सामना किया है?

इस धागे के लिए अग्रिम धन्यवाद! यह मुझे बचा रहा है !! :डी

संपादित करें: मुझे प्रदान की गई छवि का केवल आधा हिस्सा भी मिल रहा है। लेकिन रिज़ॉल्यूशन एकदम सही दिखता है xD

छवि समस्या को ठीक किया !! useCORS सक्षम नहीं था! लेकिन मुझे अभी भी केवल आधी छवि ही मिल रही है।

महान! आधी छवि कैनवास के बाहर प्रतिपादन समस्या के कारण हो सकती है। मैंने html2canvas में रिज़ॉल्यूशन/स्केलिंग जोड़ने के लिए एक पुल अनुरोध भी किया है, आपको @airdrummingfool समाधान की तुलना में

जब तक वे html2canvas में विलय नहीं हो जाते, आप उन दोनों और कुछ अन्य बगफिक्स के साथ मेरा कस्टम बिल्ड यहां प्राप्त कर सकते हैं ।

हाय @eKoopmans। आपके उत्तर के लिए धन्यवाद। मैं सिर्फ ऊंचाई को 2 से गुणा करके खदान को ठीक करने में कामयाब रहा। लेकिन, मुझे लगता है कि मुझे ऊपर और नीचे सफेद रिक्त स्थान के साथ एक बड़ी छवि मिल रही है ... इसलिए... मैं आपकी कोशिश करने जा रहा हूं और कुछ मिनटों में वापस रिपोर्ट करूंगा। !

OM(F)G @eKoopmans .. आपने

#1087 . के पक्ष में समापन

@airdrummingfool ... धन्यवाद। यह एकदम सही काम करता है।

आप https://github.com/cburgmer/rasterizeHTML.js . का उपयोग कर सकते हैं

html2canvas का नवीनतम संस्करण आपको स्केलिंग का विकल्प प्रदान करता है। वास्तव में अच्छा काम करता है।

html2canvas(तत्व, {
स्केल: 2
});

एचटीएमएल और छवि सामग्री से एकाधिक पृष्ठ पीडीएफ प्रतिपादन के लिए, scale: 1 करने से समाधान समस्या ठीक हो सकती है और साथ ही पीडीएफ सीमा से अधिक छवियों से बच सकती है।

मुझे लगता है कि यह मदद करता है, मैंने html2canvas . का उपयोग किया है

डाउनलोड पीडीऍफ़() {
वर डॉक्टर = नया जेएसपीडीएफ ({
प्रारूप: "ए 4"
});

html2canvas(document.getElementById("pdf-doc"), {
स्केल: "5"
}).फिर (कैनवास => {
this.imgFile = कैनवास;
doc.addImage(this.imgFile, "JPEG", 5, 5, 200, 285);
doc.save ("फ़ाइल नाम" + ".pdf");
});
}