21

কেস:

আমার কাছে 2 টি আইফ্রেম রয়েছে এবং উভয়েরই অনেকগুলি ডিভ এবং অন্যান্য নিয়ন্ত্রণ রয়েছে তাই উভয়ই iframes HTML ওয়েবসাইটের মাঝারি আকারের মতো। আমি উভয় তুলনা করতে এবং পার্থক্য খুঁজে পেতে চাই।

আমি এখানে বিভিন্ন বিকল্প ভেবেছি:

সমাধান 1: 2 টি আইফ্রিমের পূর্ণ স্ক্রিনশট নিন এবং পাইথনের বালিশ লাইব্রেরি ব্যবহার করে উভয় স্ক্রিনশট তুলনা করুন যা স্ক্রিনশটের সাথে মিল না থাকা অঞ্চলে গ্রিডটি আঁকবে। তবে এখানে সমস্যাটি হ'ল আমি ইন্টারনেটে এমন কোনও কোড পাইনি যা পুরো আইফ্রেমে স্ক্রিনশট গ্রহণ করতে পারে ( আমার কাছে একটি স্ক্রোল বারের সাথে একটি দীর্ঘ আইফ্রেম রয়েছে )। আমি প্রায় সমস্ত উত্তর এসওতে চেষ্টা করেছি তবে সবাই সাধারণ পৃষ্ঠার জন্য কাজ করছে তবে ইফ্রেমের জন্য নয়।

তথ্যসূত্র : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

সমাধান 2: উভয়ই iframe থেকে সমস্ত এইচটিএমএল কোড পান এবং এটি তুলনা করুন, তবে ফলাফল বিশ্লেষণ করা সহজ হবে না কারণ এটি এমন কিছু এইচটিএমএল কোড খুঁজে পাবে যা 2 টি আইফ্রেমে পৃথক বা মিল নেই। এটি পাঠ্যের তুলনায় আরও ভাল হবে এবং আমার বিশ্বাস করা ভাল সমাধান নয়।

সুতরাং আমি উভয় কোডের সন্ধান করছি যা পাইথন বা জাভাস্ক্রিপ্ট ব্যবহার করে iframe এর পুরো স্ক্রিনশট নিতে পারে বা আরও ভাল বিকল্প যা আমাকে 2 iframes তুলনা করতে এবং পার্থক্যগুলি সন্ধান করতে দেয়।

নীচের অনুসারে কোন গুগল আমাদের সন্ধান করে তার প্রায় সব উত্তরই আমি চেষ্টা করেছিলাম:

নমুনা iframe এখানে দেওয়া হয়েছে যেখানে পুরো HTML এই iframe এর মধ্যে রয়েছে: https://grapesjs.com/demo.html , যদি কিছু কোড এই আইফ্রেমের পুরো স্ক্রিনশট নিতে পারে তবে আমার সাথে তুলনা করা সহজ হবে।

— সাহায্যকারী
সূত্র

নীচে সমস্ত আইফ্রেমগুলি সাধারণ এইচটিএমএল পৃষ্ঠাগুলি। আপনি কি বিশেষভাবে তারা দেখতে চান যে তারা ইফ্রেমসের মতো?

— ম্যাট এলেন

হ্যাঁ সমস্ত HTML পৃষ্ঠার অধীনে। আমার লক্ষ্যটি নিশ্চিত করা হয় যে উভয়ই আইফ্রেমে ভিজ্যুয়ালের ক্ষেত্রে একই দেখায়।

— হাতের সাহায্যে

তাহলে শীর্ষস্থানীয় পৃষ্ঠাগুলি এবং স্ক্রিন শটগুলিতে আইফ্রেমে প্রদর্শিত পৃষ্ঠাগুলি খুলতে কি গ্রহণযোগ্য হবে?

— ম্যাট এলেন

আমার মনে হয় তবে এটি কীভাবে সম্ভব কারণ আমি চেষ্টা করেছি এমন সমস্ত স্ক্রিনশট কোডগুলি যে কোনও পৃষ্ঠার পূর্ণ স্ক্রিনশট নিতে সক্ষম তবে এটি যদি আইফ্রেমে আসে তখন এটি কেবলমাত্র স্ক্রোলশট নেয় যা স্ক্রোল ছাড়াই দৃশ্যমান।

— হাতের সাহায্যে

আপনার কাছে আইফ্রেমে ইউআরএল রয়েছে তাই আপনি এগুলিকে শীর্ষ স্তরের পৃষ্ঠাগুলি হিসাবে খুলতে পারেন।

— ম্যাট এলেন

8

যেমনটি আমরা আবিষ্কার করেছি আমাদের আড্ডায় , আলোচনার অধীনে থাকা আইফ্রেমগুলি জাভাস্ক্রিপ্টে উত্পন্ন হয় এবং কোনও ইউআরএল থেকে লোড হয় না।

এটি স্ক্রিনটি iframe দখল করার জন্য স্বয়ংক্রিয়ভাবে অসুবিধা প্রকাশ করে, তবে একটি ম্যানুয়াল প্রক্রিয়া সম্ভব:

ফায়ারফক্সে আইফ্রেমে ডান ক্লিক করুন এবং পপআপ মেনুতে "এই ফ্রেম" নির্বাচন করুন, তারপরে "ফ্রেম হিসাবে সংরক্ষণ করুন ..." নির্বাচন করুন।

ফ্রেমটি সংরক্ষণ করা হয়ে গেলে, ডাউনলোড করা কিছু সিএসএসের সঠিক স্থানের দিকে নির্দেশ করার জন্য পটভূমি ইউআরএলগুলি পেতে ফিড করা প্রয়োজন। এটি করার পরে, এইচটিএমএল ফাইলটি স্থানীয়ভাবে খুলুন এবং আপনি বর্তমানে সাধারণ ওয়েব পৃষ্ঠার জন্য যে পদ্ধতিটি ব্যবহার করছেন তা ব্যবহার করে আপনি স্ক্রিন শট নিতে সক্ষম হবেন।

— ম্যাট এলেন
সূত্র

6

পর্দার অংশ দখল

আপনি এটি ম্যানুয়ালি বা স্বয়ংক্রিয়ভাবে দখল করতে পারেন। যদি তুলনা করার জন্য যদি অনেকগুলি আইফ্রেম না থাকে তবে ম্যানুয়ালি এটি করা একটি বিকল্প। এই পদ্ধতির অসুবিধা হ'ল ফসল কাটার সময় আপনাকে খুব সুনির্দিষ্ট হতে হবে।

আপনি এটি স্বয়ংক্রিয়ভাবেও করতে পারেন, উদাহরণস্বরূপ, ডিওএমের অংশটি একটি ক্যানভাসে লোড করা এবং এটির মতো ছবি এখানে তৈরি করুন: ব্রাউজারে স্ক্রিনশটগুলি নিতে HTML5 / ক্যানভাস / জাভাস্ক্রিপ্ট ব্যবহার করে

এছাড়াও, আপনি যে পৃষ্ঠাটি সম্পর্কে আগ্রহী তা নিশ্চিত করতে এবং আপনার এখানে বর্ণিত স্ক্রিনশটটি করতে অস্থায়ীভাবে আপনার সামগ্রীটি পরিবর্তন করতে পারেন: https://www.cnet.com/how-to/how-to-take- একটি স্ক্রিনশট অফ এ-পুরো ওয়েব-পৃষ্ঠার-ইন-ক্রোম /

দুটি চিত্রের তুলনা করা

দুটি চিত্রের সমস্ত পিক্সেল লুপ করে তুলনা করে তুলনা করতে পারেন।

দুটি চিত্রের তুলনা করতে অ্যালগরিদম

ফলাফল দেখাচ্ছে

আপনার প্রোগ্রামটির ইনপুট হিসাবে দুটি চিত্র নেওয়া উচিত এবং আউটপুট হিসাবে একই আকারের একটি নতুন চিত্র তৈরি করা উচিত। আমি প্রস্তাব দিচ্ছি যে লক্ষ্য চিত্রটি তুলনার জন্য এবং প্রতিটি পার্থক্যের সীমানায় একটি লাল রেখা আঁকতে চিত্রগুলির একটির পিক্সেলগুলি দেখানো উচিত। এই উদ্দেশ্যে আপনাকে পার্থক্যের একটি অঞ্চলকে আয়তক্ষেত্রগুলিতে ভাগ করতে হবে। এইভাবে আপনি দেখতে পেলেন কোথায় পার্থক্য রয়েছে এবং সামগ্রীগুলি কী আলাদা।

— লাজোস আরপাদ
সূত্র

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ। পাইথনের সাথে এইচটিএমএল 2 ক্যানভাস ব্যবহার করার কোনও সুযোগ আছে কারণ আমার পাইথন বা জাভাস্ক্রিপ্টে এমন কিছু দরকার যা ইফ্রেমের পুরো স্ক্রিনশট নিতে পারে।

— হাত সাহায্য করা

@ হেল্পিংহ্যান্ডস এইচটিএমএল 2 ক্যানভাস একটি জাভাস্ক্রিপ্ট সরঞ্জাম, সুতরাং আপনি এটি জাভাস্ক্রিপ্টের মাধ্যমে ব্যবহার করতে পারেন (দেখুন: html2canvas.hertzen.com )। এইচটিএমএল 2 ক্যানভাসের পাইথন ব্যবহারের জন্য অনুসন্ধান করে আমি একটি পাইথন প্রক্সি পেয়েছি। আমি এটি চেষ্টা করি নি, তবে আমি আশা করি এটি সাহায্য করবে। এটি এখানে: github.com/brcontainer/html2canvas-python-proxy

— লাজোস

2

আপনি pyautogui, একা mayy pyautogui সঙ্গে মিশ্রিত বালিশ ব্যবহার করতে পারেন।

কিছু ছদ্ম কোড:

যতক্ষণ না স্ক্রোলবার নীচে স্পর্শ করে না: - একটি স্ক্রিনশট নিন - তালিকায় স্ক্রিনশটের নাম সংরক্ষণ করুন - নীচে স্ক্রোল করুন, এই লুপটি চালিয়ে যান

উপরের লুপটি আবার দ্বিতীয় ইফ্রামের জন্য করুন

আপনার তৈরি করা স্ক্রিনশট দুটি তালিকা থেকে সমস্ত স্ক্রিনশটগুলি তুলনা করুন।

ঠিক আছে, আমি এটি কিভাবে করব। যদিও আরও ভাল উপায় আছে।

— PythonAmateur742
সূত্র

কথাটি হ'ল আমার কাছে কেবল একটি আইফ্রেম আছে তবে এটি দীর্ঘ উল্লম্বভাবে এবং কোনও সরঞ্জামই এটির পুরো স্ক্রিনশট নিতে সক্ষম নয়।

— হাত সাহায্য করা হচ্ছে

আপনার একটি দীর্ঘ স্ক্রিনশট লাগবে না। বেশ কয়েকটি স্ক্রিনশট পাশাপাশি দুর্দান্ত কাজ করবে। যতক্ষণ আপনি সর্বদা একই পরিমাণ নীচে স্ক্রোল করেন। সুতরাং মূলত, আপনি আপনার iframe ফোকাস পেতে দিন। তারপরে আপনি ডাউন তীর 5 টি চাপুন (বা আপনার যা প্রয়োজন) বার বার স্ক্রিনশট নিন। আপনার স্ক্রিনশটগুলিতে আপনার কিছুটা ডাবল সামগ্রী রয়েছে কিনা তা বিবেচ্য নয়। আপনি অন্য ইফ্রামের জন্য একই কাজ।

— পাইথনএমেচার 742

1

স্ক্রিনশট নেওয়ার জন্য এইচটিএমএল 2 ক্যানভাস ব্যবহার করুন

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

এটি আপনাকে ব্যাক-এন্ডে চিত্রগুলি প্রেরণ করতে সক্ষম করবে।

সম্পূর্ণ চিত্রটি আনতে এই থ্রেডটি এইচটিএমএল 2 ক্যানভাসটি ব্যবহার করতে ব্যবহার করুন

আপনার দুটি ছবি হয়ে গেলে আপনি 2 টি চিত্রের মধ্যে পার্থক্য জানতে ওপেনসিভি ব্যবহার করতে পারেন আপনি এটি উল্লেখ করতে পারেন - https://www.pyimagesearch.com/2017/06/19/image-differences-with-opencv-and-python/

— অ্যাকোয়া 4
সূত্র

1

আমার কাছে 2 টি আইফ্রেম রয়েছে এবং উভয়েরই অনেকগুলি ডিভ এবং অন্যান্য নিয়ন্ত্রণ রয়েছে তাই উভয়ই iframes HTML ওয়েবসাইটের মাঝারি আকারের মতো। আমি উভয় তুলনা করতে এবং পার্থক্য খুঁজে পেতে চাই।

আপনি কি তুলনা করতে চান? সিএসএস বিধি / বৈশিষ্ট্যের পার্থক্য? তথ্য / পাঠ্য পার্থক্য? বা ভিজ্যুয়াল রেন্ডার?

ভিজ্যুয়াল রেন্ডারের সাথে তুলনা করুন

আপনার iframe URL টি নিষ্কর্ষ এবং পৃষ্ঠা লোড করতে পারেন সেলেনিয়াম থেকে স্ক্রিনশট নিতে (উদাহরণ দেখুন) । এছাড়াও আপনার ফায়ারফক্স এক্সটেনশন সেলেনিয়াম আইডিই রয়েছে ।

— এ-312
সূত্র

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ। আসলে আমার আইফ্রেমে কোনও url বা src নেই। এবং স্ক্রিনশটটি কেবল দেখুন পোর্ট স্ক্রিনশট নিতে তবে আমার ইফ্রেমের পূর্ণ স্ক্রিনশট দরকার।

— হাতের সাহায্যে

কীভাবে 2 ইফ্র্যামেসের তুলনা করবেন এবং দৃষ্টিভঙ্গি পার্থক্য পাবেন?

পর্দার অংশ দখল

দুটি চিত্রের তুলনা করা

ফলাফল দেখাচ্ছে

ভিজ্যুয়াল রেন্ডারের সাথে তুলনা করুন