2 iframes की तुलना कैसे करें और नेत्रहीन अंतर प्राप्त करें?

Question

मामला :

मेरे 2 iframes हैं और दोनों में बहुत सारे divs और अन्य नियंत्रण हैं इसलिए दोनों iframes HTML वेबसाइटों के मध्यम आकार की तरह हैं। मैं दोनों की तुलना करना चाहता हूं और मतभेदों का पता लगाना चाहता हूं।

मैंने सोचा कि यहाँ विभिन्न विकल्प हैं:

समाधान 1: 2 iframes का एक पूर्ण स्क्रीनशॉट लें और दोनों स्क्रीनशॉट की तुलना पाइथन की तकिया लाइब्रेरी का उपयोग करके करें जो एक स्क्रीनशॉट में बेमेल क्षेत्र पर ग्रिड खींचती है। लेकिन यहाँ मुद्दा यह है कि मुझे इंटरनेट पर ऐसा कोई कोड नहीं मिला, जो पूर्ण आईफ्रेम स्क्रीनशॉट ले सके ( मेरे पास एक लंबा आइफ्रेम है जिसमें एक स्क्रॉल बार है )। मैंने SO पर लगभग सभी उत्तरों की कोशिश की, लेकिन सभी एक सामान्य पृष्ठ के लिए काम कर रहे हैं, लेकिन iframe के लिए नहीं।

संदर्भ : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

समाधान 2: किसी भी तरह से सभी HTML कोड को iframe से प्राप्त करें और उसकी तुलना करें, लेकिन परिणाम का विश्लेषण करना आसान नहीं होगा क्योंकि यह कुछ HTML कोड पाएंगे जो अलग-अलग हैं या 2 iframes में एक बेमेल है। यह पाठ की तुलना में अधिक होगा और मुझे विश्वास है कि एक अच्छा समाधान नहीं है।

इसलिए मैं या तो कोड की तलाश कर रहा हूं जो कि पायथन या जावास्क्रिप्ट या कुछ बेहतर विकल्प का उपयोग करके iframe का पूर्ण स्क्रीनशॉट ले सकता है जो मुझे 2 iframes की तुलना करने और मतभेदों का पता लगाने की अनुमति देता है।

मैंने लगभग सभी उत्तरों की कोशिश की, जो Google हमारे नीचे के अनुसार पाते हैं:

नमूना iframe यहाँ दिया गया है जहाँ पूरा html iframe के भीतर है: https://grapesjs.com/demo.html , यदि कुछ कोड इस iframe का पूर्ण स्क्रीनशॉट ले सकते हैं तो मेरे लिए तुलना करना आसान होगा।

Comments

सभी iframes नीचे html पृष्ठ सामान्य हैं। क्या आप विशेष रूप से देखना चाहते हैं कि वे आइफ्रेम के रूप में क्या पसंद करते हैं?

— मैट एलेन

हाँ सभी HTML पृष्ठ के अंतर्गत हैं। मेरा लक्ष्य यह सुनिश्चित करना है कि दोनों iframe दृश्य के संदर्भ में समान दिखते हैं।

— हैंड्स हेल्पिंग

फिर क्या उन पृष्ठों को खोलना स्वीकार्य होगा जो आइफ्रेम शो के शीर्ष स्तर के पेज हैं और उन पर स्क्रीन शॉट?

— मैट एलेन

मुझे ऐसा लगता है लेकिन यह कैसे संभव है क्योंकि मैंने जो भी स्क्रीनशॉट कोड आज़माए हैं वे किसी भी पेज का पूरा स्क्रीनशॉट लेने में सक्षम हैं, लेकिन जब आइफ्रेम की बात आती है, तो यह केवल उस हिस्से का स्क्रीनशॉट लेता है जो बिना स्क्रॉल के दिखाई देता है।

— मदद करना

आपके पास iframe urls है, इसलिए आप उन्हें शीर्ष स्तरीय पृष्ठों के रूप में खोल सकते हैं।

— मैट एलेन

Answer 1

जैसा कि हमने अपनी चैट में पाया है , चर्चा के तहत iframes जावास्क्रिप्ट में उत्पन्न होते हैं और URL से लोड नहीं होते हैं।

यह iframe को हथियाने वाली स्क्रीन को स्वचालित करने में एक कठिनाई प्रस्तुत करता है, हालांकि एक मैनुअल प्रक्रिया संभव है:

फ़ायरफ़ॉक्स में iframe पर राइट क्लिक करें और पॉपअप मेनू में "इस फ़्रेम" का चयन करें, फिर "Save As As ..." चुनें।

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

Answer 2

स्क्रीन का हिस्सा हथियाना

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

आप इसे स्वचालित रूप से भी कर सकते हैं, उदाहरण के लिए DOM के हिस्से को एक कैनवास में लोड करना और उसकी एक तस्वीर बनाना, जैसे यहाँ: HTML5 / कैनवास / जावास्क्रिप्ट का उपयोग करके ब्राउज़र में स्क्रीनशॉट लेना

साथ ही, आप यह सुनिश्चित करने के लिए अपनी सामग्री को अस्थायी रूप से संशोधित कर सकते हैं कि पूरा पृष्ठ वह है जिसके बारे में आप रुचि रखते हैं और फिर एक स्क्रीनशॉट करें, जैसा कि यहाँ वर्णित है: https://www.cnet.com/how-to/how-to-take- एक-स्क्रीनशॉट-के-एक-पूरे वेब पेज में क्रोम /

दो छवियों की तुलना

आप दो छवियों को उनके सभी पिक्सेल को लूप करके तुलना कर सकते हैं।

दो छवियों की तुलना करने के लिए एल्गोरिथ्म

परिणाम दिखा रहा है

आपके प्रोग्राम को इनपुट के रूप में दो चित्र लेने चाहिए और आउटपुट के समान आकार की एक नई छवि बनानी चाहिए। मेरा सुझाव है कि लक्ष्य छवि की तुलना करने के लिए और प्रत्येक अंतर की सीमा पर एक लाल रेखा खींचने के लिए छवियों में से एक का पिक्सेल दिखाना चाहिए। इस उद्देश्य के लिए आपको मतभेदों के एक क्षेत्र को आयतों में विभाजित करना होगा। इस तरह आप देख सकते हैं कि अंतर कहां हैं और सामग्री क्या है जो अलग है।

Comments

आपके उत्तर के लिए धन्यवाद। क्या कोई मौका है कि मैं अजगर के साथ Html2Canvas का उपयोग कर सकता हूं क्योंकि मुझे अजगर या जावास्क्रिप्ट में कुछ चाहिए जो iframe का पूरा स्क्रीनशॉट ले सकता है।

— हैंड्स हेल्पिंग

@HelpingHands HTML2Canvas एक जावास्क्रिप्ट टूल है, इसलिए आप इसे जावास्क्रिप्ट के माध्यम से उपयोग कर सकते हैं (देखें: html2canvas.hertzen.com )। HTML2Canvas के पायथन usages की खोज में, मुझे पायथन प्रॉक्सी मिला है। मैंने इसकी कोशिश नहीं की, लेकिन मुझे आशा है कि यह मदद करता है। यहाँ यह है: github.com/brcontainer/html2canvas-python-proxy

— लाजोस अर्पाद

Answer 3

आप पियुटोगुई, मेबी पाइयुतोगुई के साथ संयोजन में तकिया का उपयोग कर सकते हैं।

कुछ छद्म कोड:

जब तक स्क्रॉलबार नॉट बॉटम टच करता है: - स्क्रीनशॉट लें - स्क्रीनशॉट नाम सूची में सहेजें - नीचे स्क्रॉल करें, इस लूप को जारी रखें

दूसरे आइफ्रेम के लिए उपरोक्त लूप फिर से करें

आपके द्वारा उत्पन्न स्क्रीनशॉट की दो सूचियों से सभी स्क्रीनशॉट की तुलना करें।

खैर, यह है कि मैं यह कैसे करेंगे। हालांकि बेहतर तरीके भी हैं।

Comments

बात यह है कि मेरे पास केवल एक iframe है, लेकिन यह लंबवत है और कोई भी टूल इसे पूर्ण स्क्रीनशॉट लेने में सक्षम नहीं है।

— हैंड्स हेल्पिंग

आपको एक लंबे स्क्रीनशॉट की आवश्यकता नहीं है। कई स्क्रीनशॉट के रूप में अच्छी तरह से महान होगा। जब तक आप हमेशा एक ही राशि को नीचे स्क्रॉल करते हैं। तो मूल रूप से, आप अपने आइफ्रेम को फोकस करने दें। फिर आप नीचे तीर 5 (या जो भी आपकी ज़रूरत है) को बार-बार दबाएं और स्क्रीनशॉट लें। इससे कोई फर्क नहीं पड़ता कि आपके स्क्रीनशॉट में थोड़ी सी डबल सामग्री है। आप अन्य iframe के लिए भी ऐसा ही करते हैं।

— PythonAmateur742

Answer 4

स्क्रीनशॉट लेने के लिए html2canvas का प्रयोग करें

html2canvas(document.getElementById("img_dots")).then(
  function (canvas2) {
    var img_data2 = canvas2.toDataURL('image/png');
    var im_data2 = img_data2.replace('data:image/png;base64,', '');
    $.ajax({
      type: "POST",
      url: "send_image_to_backend",
      data: {
        "base64data": im_data2,
        // "filename": filename.split(".")[0]
        "filename": new_filename + ".png"
      }, success: function () {
         //send second image and compare
      }
    });
  }
);

यह आपको बैक-एंड पर इमेज भेजने में सक्षम करेगा।

संपूर्ण छवि लाने के लिए html2canvas को ट्विस्ट करने के लिए इस धागे का उपयोग करें

एक बार आपके पास दोनों छवियां होने के बाद आप 2 छवियों के बीच अंतर जानने के लिए ओपनसीवी का उपयोग कर सकते हैं - आप इसको संदर्भित कर सकते हैं - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Answer 5

मेरे 2 iframes हैं और दोनों में बहुत सारे divs और अन्य नियंत्रण हैं इसलिए दोनों iframes HTML वेबसाइटों के मध्यम आकार की तरह हैं। मैं दोनों की तुलना करना चाहता हूं और मतभेदों का पता लगाना चाहता हूं।

आप क्या तुलना करना चाहते हैं? सीएसएस नियम / गुण अंतर? डेटा / पाठ अंतर? या दृश्य रेंडर?

---

दृश्य रेंडर की तुलना करें

आप iframe URL निकाल सकते हैं और स्क्रीनशॉट लेने के लिए सेलेनियम के साथ पेज लोड कर सकते हैं (उदाहरण देखें) । इसके अलावा आपके पास फ़ायरफ़ॉक्स एक्सटेंशन सेलेनियम आईडीई है ।

Comments

आपके उत्तर के लिए धन्यवाद। वास्तव में मेरे iframe का कोई url या src नहीं है। और स्क्रीनशॉट लेने के लिए केवल पोर्ट स्क्रीनशॉट लें लेकिन मुझे iframe का पूर्ण स्क्रीनशॉट चाहिए।

— हैंड्स हेल्पिंग