Html2canvas: क्रॉस डोमेन छवियां रेंडर नहीं कर रही हैं (कोई CORS या प्रॉक्सी नहीं)

को निर्मित 21 मई 2015 · 23टिप्पणियाँ · स्रोत: niklasvh/html2canvas

नमस्ते,

निम्नलिखित कोड छवियों का उपयोग क्रॉस-डोमेन प्रदान नहीं कर रहा है।

html2canvas($(".canvas-surround"), {
        logging: true,
        width: 1920 * getScale(),
        height: 1080 * getScale(),
        useCORS: false,
        onrendered: function(canvas) {

            var bottomCtx = canvas.getContext("2d");
            var topCtx = canvas.getContext("2d");
            var bData = bottomCtx.getImageData(0, 0, canvas.width, canvas.height);
            var tData = topCtx.getImageData(0, 0, canvas.width, canvas.height);

            var merged = mergeData(bData, tData);

            bottomCtx.putImageData(merged, 0, 0);

            var newImg = canvas.toDataURL("image/png");
            console.log(newImg);
            var blob = b64toBlob(newImg, "image/png");
            console.log(blob);

            var blobUrl = URL.createObjectURL(blob);

            console.log(blobUrl);

            downloadURI(blobUrl);
        }
    });

" http://www.thermmark.co.uk " से " http://www.playgroundmarkingsdirect.co.uk " से छवियों को हथियाने की कोशिश करते समय छवियों को प्रस्तुत नहीं किया जाएगा।

जब मैंने कोड को " http://www.thermmark.co.uk " वेबसाइट पर स्थानांतरित कर दिया, तो प्रदान की गई छवियां (मेरे पास दोनों डोमेन हैं)

कोई विचार?

Needs More Information

स्रोत

Mallander

सबसे उपयोगी टिप्पणी

हो सकता है कि आपको useCORS ptoperty को सत्य के रूप में उपयोग करना चाहिए, यह क्रॉसडोमेन वेब सामग्री के लिए अभिप्रेत है

akaJes 21 मई 2015

👍6 😄1 👎1

सभी 23 टिप्पणियाँ

akaJes 21 मई 2015

👍6 😄1 👎1

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

Mallander 21 मई 2015

क्या आपने मेरे फिक्स की कोशिश की? https://github.com/niklasvh/html2canvas/pull/554

Cristy94 27 मई 2015

शायद allowTaint को सही पर सेट करना चाहिए, लेकिन फिर आप रेंडर किए गए परिणाम को निर्यात नहीं कर सकते।

oddui 25 जून 2015

मुझे समझ में नहीं आता कि क्यों न userCORS या proxy ... वे सिर्फ ऐसी समस्याओं के लिए बनाए गए थे।

brcontainer 22 जुल॰ 2015

@brcontainer क्योंकि वे नवीनतम संस्करण में काम नहीं करते हैं, मेरा सुधार देखें: https://github.com/niklasvh/html2canvas/pull/554

Cristy94 22 जुल॰ 2015

@ क्रिस्टी 94 ज़रूर !! बढ़िया सुधार! धन्यवाद!

brcontainer 23 जुल॰ 2015

हाय @ क्रिस्टी 94 ,

मैं अपने एचटीएमएल में सीएमएस (कंटेंटफुल) से इमेज ला रहा हूं और फिर उस एचटीएमएल का पीडीएफ जेनरेट करने की कोशिश कर रहा हूं।
लेकिन जेनरेट किए गए पीडीएफ में, छवियां गायब हैं। (ऐसा लगता है कि क्रॉस ओरिजिन का मुद्दा है)।
कृपया मुझे सुझाव दें कि मैं इस मुद्दे से कैसे छुटकारा पा सकता हूं।
नीचे मेरा कोड है-:

फंक्शन डाउनलोडपीडीएफ () {
वर कैनवासटॉइमेज = फ़ंक्शन (कैनवास) {
वर img = नई छवि ();
var dataURL = कैनवास.toDataURL ('छवि/पीएनजी');
img.crossOrigin = "बेनामी";
img.src = dataURL;
वापसी आईएमजी;
};

वर कैनवासशिफ्ट इमेज = फ़ंक्शन (पुराना कैनवास, शिफ्ट एएमटी) {
ShiftAmt = parseInt(shiftAmt) || 0;
अगर (! शिफ्ट एएमटी) {पुराना कैनवास लौटाएं; }

var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
ctx.mozImageSmoothingEnabled = असत्य;
ctx.webkitImageSmoothingEnabled = असत्य;
ctx.msImageSmoothingEnabled = असत्य;
ctx.imageSmoothingEnabled = असत्य;

var img = कैनवासटॉइमेज (पुराना कैनवास);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

नया कैनवास वापस करें;
};

वर कैनवासटॉइमेजसक्सेस = फंक्शन (कैनवास) {
वर पीडीएफ = नया जेएसपीडीएफ ('एल', 'पीएक्स'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
टोटलपीडीएफहाइट = 0,
htmlPageHeight = कैनवास.ऊंचाई,
htmlScaleFactor = कैनवास.चौड़ाई / (pdfPageWidth * pdfScaleFactor),
सेफ्टीनेट = 0;

जबकि (कुल पीडीएफ हाइट <एचटीएमएलपेजहाइट && सेफ्टीनेट <15){
वर नया कैनवास = कैनवासशिफ्ट इमेज (कैनवास, कुल पीडीएफ हाइट);
pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
// वर उपनाम = Math.random().toString(35);
// pdf.addImage (newCanvas, 0, 0, pdfPageWidth, 0, 'png', उपनाम, 'कोई नहीं');

TotalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

अगर (कुल पीडीएफ हाइट <एचटीएमएलपेजहाइट){
पीडीएफ.एडपेज ();
}
सेफ्टीनेट++;
}

वर पेजनाम = document.location.pathname.match(/[^/]+$/)[0];
pdf.save (पेजनाम + '.pdf');
};

html2canvas($('body')[0],
{
ऑनरेंडर: फ़ंक्शन (कैनवास) {
कैनवासटॉइमेजसक्सेस (कैनवास);
}
});
}

gauravmishra24 28 दिस॰ 2016

😕1 👍1

अरे, क्या इसका कोई समाधान होगा? सीओआरएस छवियों को यहां भी प्रस्तुत नहीं किया गया है :(

Rookev 17 मार्च 2017

हाय रूकेव,

आप html2canvas फ़ंक्शन में किसी एक विकल्प को पास करके ऐसा कर सकते हैं। और मेरा विश्वास करो यह निश्चित रूप से काम करेगा :)

html2canvas($('#div_pdf')[0],
{
useCORS: true, // इस विकल्प को फ़ंक्शन में पास करने से पीडीएफ के डाउनलोड किए गए संस्करण में क्रॉस मूल छवियों को ठीक से प्रस्तुत किया जाएगा
ऑनरेंडर: फ़ंक्शन (कैनवास) {
कैनवासटॉइमेजसक्सेस (कैनवास);
}
});
अधिक जानकारी के लिए आप नीचे दिए गए URL पर html2canvas लाइब्रेरी के दस्तावेज़ीकरण पर एक नज़र डाल सकते हैं-:
https://html2canvas.hertzen.com/documentation.html

gauravmishra24 17 मार्च 2017

😕5 👍4

हाय @ गौरवमिश्रा 24 , दुर्भाग्य से यह काम नहीं करता है। समस्या यह है कि मैं उस सर्वर से छवियों को शामिल करना चाहता हूं जहां सर्वर का ध्वज है

Access-Control-Allow-Origin: *

सेट नहीं

Rookev 17 मार्च 2017

👍4

हाय रूकेव,

क्या आप कृपया अपना कोड स्निपेट पोस्ट कर सकते हैं?

ताकि मैं उस पर एक बेहतर नज़र रख सकूँ .....

gauravmishra24 20 मार्च 2017

नमस्ते,

क्या इस के लिए कोई हल है? यहां तक कि उपयोग के साथ CORS सही पर सेट होने के बावजूद, चित्र डाउनलोड नहीं हो रहे हैं। जैसा कि ऊपर बताया गया है, अभी भी क्रॉस-ओरिजिनल त्रुटि प्राप्त करें।

साथ ही, वितरित html2Canvas.js फ़ाइल में Cristy94 के समाधान के बारे में निश्चित नहीं है। वितरित फ़ाइल में कोड बदलने के बाद भी, https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 के अनुसार यह भी काम नहीं करता है।

दूसरे विकल्प के लिए, प्रॉक्सी सेटिंग्स के साथ, कोणीय 2 एप्लिकेशन के लिए कोई समाधान है?
वर्तमान साइट (https://github.com/niklasvh/html2canvas/wiki/Proxies) सूची में यह नहीं है!

braino15 16 मई 2017

👍1

क्या यह अभी भी v1.0.0 के साथ कोई समस्या है? यदि हां, तो क्या आप कृपया jsfiddle पर एक उदाहरण साझा कर सकते हैं।

niklasvh 12 दिस॰ 2017

यह समस्या अपने आप बंद कर दी गई है क्योंकि मूल लेखक की ओर से अधिक जानकारी के लिए हमारे अनुरोध का कोई जवाब नहीं मिला है। केवल उस जानकारी के साथ जो वर्तमान में समस्या में है, हमारे पास कार्रवाई करने के लिए पर्याप्त जानकारी नहीं है। यदि आपके पास है तो कृपया संपर्क करें या हमें उन उत्तरों की तलाश करें जिनकी हमें आवश्यकता है ताकि हम आगे की जांच कर सकें।

no-response[bot] 12 दिस॰ 2017

👎2

@niklasvh यहाँ v1.0.0 के साथ कोडपेन पर मेरा उदाहरण है:
https://codepen.io/Onlylonger/pen/ppjPKX
एक ही quesiton. आपको धन्यवाद

Onlylonger 16 दिस॰ 2017

क्या कोई अन्य प्लगइन है जिसे कोई जानता है। यह विभिन्न सर्वर अनुरोध के साथ काम नहीं कर रहा था। प्रॉक्सी के लिए कोई उचित उदाहरण नहीं दिया गया है।

vinayistar 11 जून 2018

@vinayistar आप मेरे परिवर्तनों को आजमा सकते हैं लिंक देखें https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

CrandellWS 4 नव॰ 2018

useCORS का उपयोग करना और img विशेषता crossOrigin:anonymous

iHadDream 17 जुल॰ 2019

👍4

{ useCORS: false, allowTaint: true } यह मेरे लिए काम किया है

DanyRupes 15 अक्तू॰ 2020

इस समस्या का मेरा समाधान छवि स्रोत को बेस 64 में परिवर्तित कर रहा है

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

todoi 15 नव॰ 2020

@todoi क्या आप इसका नमूना jspdf के साथ प्रदान कर सकते हैं।

nishanta454 29 नव॰ 2020

@ nishanta454
यह वह उदाहरण है जो मैंने लिखा था। html2canvas क्रॉस ओरिजिनल छवियों को प्रस्तुत करता है ।
इस उदाहरण में, मैं प्रॉक्सी छवि अनुरोध में सीओआरएस हेडर जोड़ने के लिए कॉर्स-कहीं भी का उपयोग करता हूं।

पहली चीज जो हमें चाहिए वह एक सर्वर है जो छवियों को एक्सेस-कंट्रोल-अनुमति-उत्पत्ति हेडर के साथ छवियों को होस्ट करने के लिए कॉन्फ़िगर किया गया है ताकि छवि फ़ाइलों तक क्रॉस-ओरिजिनल एक्सेस की अनुमति मिल सके।
CORS_enabled_image से

todoi 2 दिस॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Html2canvas: क्रॉस डोमेन छवियां रेंडर नहीं कर रही हैं (कोई CORS या प्रॉक्सी नहीं)

सबसे उपयोगी टिप्पणी

सभी 23 टिप्पणियाँ

संबंधित मुद्दों