আমি কীভাবে প্রমাণ করতে পারি যে দুটি HTML পৃষ্ঠাগুলি অভিন্ন দেখাচ্ছে?

Question

যেমন, আমার কাছে এটি রয়েছে:

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>

এবং এই:

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

এবং আমি দ্বিতীয়টি ঠিক প্রথমটির মতো দেখতে চাই।

আমি বিশ্বাস করি যেগুলি অভিন্ন দেখায়, তবে আমার একমাত্র প্রমাণ ছিল পুরানো "উইন্ডোজগুলির মধ্যে দ্রুত এবং পিছনে সুইচটি বাস্তব এবং দ্রুত চোখের বল" কৌশলটি ব্যবহার করা। (জ্যোতির্বিজ্ঞানীরা এটিকে একটি "জ্বলজ্বলকারী তুলনাকারী" বলেছিলেন - https://en.wikedia.org/wiki/Blink_comparator )। আমি নিশ্চিত করেছিলাম উইন্ডোজগুলি একই আকার এবং একই অবস্থানে ছিল। তবে যদি রেন্ডার করা এইচটিএমএল স্ক্রিনে ফিট না করে তবে এটি খুব কঠিন হতে পারে।

এই তুলনা করার জন্য আরও কোন নির্দিষ্ট সরঞ্জাম বা পদ্ধতি আছে?

আমি ক্রোম 77.0.3865.120 এবং ফায়ারফক্স 69.0.3 উভয় এ দেখেছি in

আমি উদাহরণস্বরূপ জানি যে ব্রাউজারের সাথে অ্যাসিড পরীক্ষাগুলি যা মূলত ওয়েব স্ট্যান্ডার্ড প্রকল্পের অংশ ছিল - https://www.acidtests.org/ - পিক্সেলের নিখুঁত রেন্ডারিং ছিল বেঞ্চমার্ক।

(অতিরিক্ত ক্রেডিট: দ্বিতীয় কোড স্নিপেটের জন্য এইচটিএমএল সম্ভবত আমার প্রয়োজনের জন্য পর্যাপ্ত; আপনি যদি উন্নতির পরামর্শ দেওয়ার জন্য যত্ন নেন তবে সেগুলি স্বাগত হবে))

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

Comments

আপনি যে পদ্ধতিটি ব্যবহার করেছিলেন তা আমার

— পক্ষেও

আপনি উভয়ের স্ক্রিনশট নিতে পারেন এবং তারপরে স্ক্রিনশটগুলি ওভারলে করতে পারেন এবং শীর্ষস্থানীয়টির অস্বচ্ছতাটি তারা লাইন করে রয়েছে তা নিশ্চিত করতে পরিবর্তন করতে পারেন

— APAD1

@ এপিএডি 1 - এটি এখনও তাদের নজরকাড়া। একটি চিত্র পৃথক ব্যবহার করুন।

— কুইন্টিন

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

— হেরেটিক বানর

আমি বিশ্বাস করি স্মার্ট বিয়ারের টেস্ট কমপ্লিট এই ডকুমেন্টেশনটি করতে পারে তবে এটি ব্যয়বহুল হতে পারে।

— গ্রাহাম

Answer 1

সিএসএস সম্পর্কিত ওয়েবস্টিটি বিকাশ করার সময় আমি অনুরূপ কিছু করেছি । আমাকে এইচটিএমএল / সিএসএস দ্বারা উত্পাদিত একটি আউটপুটটি এমন চিত্রের সাথে তুলনা করতে হয়েছিল যা এইচটিএমএল / সিএসএস দিয়ে তৈরি হয়েছিল।

আমি ডোম-টু-ইমেজ ব্যবহার করেছি , যা কোডটিকে একটি বেস 64-এনকোডড ইমেজে রূপান্তর করে। আমি এই চিত্রটি একটি ক্যানভাসের মধ্যে রেখেছি এবং তারপরে উভয় চিত্রের মধ্যে তুলনা করতে পিক্সেলম্যাচ ব্যবহার করি ।

উদাহরণস্বরূপ এখানে উদাহরণ দেওয়া হল:

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var pixDiff = pixelmatch(im_r, im_o, false, 280, 280, {
    threshold: 0.1
  });
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>


<div class="div" style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>

উপরের কোডে, আমাদের 2 টি এইচটিএমএল ব্লক এবং 2 টি ক্যানভাস রয়েছে যেখানে আমরা আমাদের ব্লকগুলি আঁকব। আপনি দেখতে পাচ্ছেন, জেএস বেশ সহজ। শেষের কোডটি পিক্সেল ম্যাচিং চালায় এবং উভয় ক্যানভাসে কতগুলি পৃথক পিক্সেল রয়েছে তা দেখায়। উভয় চিত্রই লোড হয়েছে কিনা তা নিশ্চিত করতে আমি একটি বিলম্ব যোগ করেছি (আপনি কিছু ইভেন্টের সাথে পরে অনুকূলিত করতে পারেন)

উভয় চিত্রের মধ্যে পার্থক্য হাইলাইট করতে এবং আপনার ভিজ্যুয়াল পার্থক্যটি পেতে আপনি একটি তৃতীয় ক্যানভাসটি বিবেচনা করতে পারেন:

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>


<div class="div" style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

কিছু পার্থক্য দেখতে কন্টেন্টটি পরিবর্তন করা যাক:

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>


<div class="div" style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">april</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

আমি যে দুটি প্লাগইন ব্যবহার করেছি সে সম্পর্কে আপনি আরও পড়তে পারেন এবং আরও আকর্ষণীয় বিকল্পগুলি খুঁজে পেতে পারেন।

_{স্নিপেটের ভিতরে বিক্ষোভকে আরও সহজ করতে আমি আকারগুলি 300x300 এ স্থির করছি, তবে আপনি আরও বড় উচ্চতা এবং প্রস্থ বিবেচনা করতে পারেন।}

---

হালনাগাদ

দুটি ফলাফলের মধ্যে একই ফলাফল তৈরি করার মধ্যে তুলনা করার জন্য এখানে আরও বাস্তব উদাহরণ। ক্যানভাসের প্রস্থ / উচ্চতা গতিশীল এবং সামগ্রীর উপর ভিত্তি করে থাকবে। আমি পার্থক্যটি সহ কেবলমাত্র শেষ ক্যানভাসটি দেখাব।

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

আসুন একটি পৃথক চিত্র ব্যবহার করুন:

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/12/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Answer 2

এখানে আসলে ডিওএম দিয়ে কিছু পরিমাপ করার জন্য একটি ধারণা দেওয়া হয়েছে - আমি সবে প্রশ্নযুক্ত পাঠ্যটি ডিভের সাথে প্রতিস্থাপন করেছি যার একটি ক্লাস রয়েছে যা জিজ্ঞাসা করা যেতে পারে। তারপরে আপনি সমস্ত নোডের অফসেট মুদ্রণ করতে পারেন।

আমি যা থেকে চরিত্রের ইনডেন্টগুলি পরিমাপ করি তা সত্যই একই  ।

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}

.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}

<pre>
<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
</pre>

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}

.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}

<div style="font-family:monospace">
  <div style="text-indent: 0"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 12ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
</div>

Comments

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

— কাইডো

Answer 3

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

আপনি এই লিঙ্কটিতে আরও তথ্য পেতে পারেন: https://selenium.dev/

Comments

আপনি কিভাবে পিক্সেল তুলনা করবেন? এটি করার কোনও স্বয়ংক্রিয় উপায় আছে? এছাড়াও, যদি আমি দেওয়া উদাহরণের চেয়ে এইচটিএমএলটি দীর্ঘায়িত হয়ে পর্দার সাথে মানানসই না হত তবে কী হবে?

— বেগুনি জ্যাকেট

Answer 4

প্রথমে আমাদের ছবিগুলি ক্যাপচার করতে হবে

ক্যাপচার পদ্ধতি 1

আপনার কীবোর্ডে মুদ্রণ স্ক্রিন বোতামটি (বা অন্যান্য স্ক্রিনশট সরঞ্জাম) ব্যবহার করুন।

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

ক্যাপচার পদ্ধতি 2

আপনি পুরো পৃষ্ঠা একবারে ক্যাপচার করতে ব্রাউজার এক্সটেনশন যেমন ফায়ারশট ব্যবহার করতে পারেন।

---

দ্বিতীয় আমরা চিত্রগুলি তুলনা করি

পদ্ধতি 1

1. ফটোশপ খুলুন বা ফটোপিতে যান ।

2. স্ক্রিনশটটি একটি স্তরে আটকান।

3. দ্বিতীয় পৃষ্ঠার জন্য পুনরাবৃত্তি করুন, একটি আলাদা স্তরে আটকে দিন।

4. টগল লেয়ারের দৃশ্যমানতা এবং যে কোনও পরিবর্তন সুস্পষ্ট হবে। অথবা তুলনা করতে শীর্ষ স্তরের অস্বচ্ছতা সামঞ্জস্য করুন (এবং / অথবা বিভিন্ন মিশ্রণ মোড সেট করুন)।

পদ্ধতি 2

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

পদ্ধতি 3

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

Answer 5

আপনি একই নথিতে একে অপরের উপরে অবস্থানে থাকতে পারেন: পরম; এবং সম্ভবত কাছাকাছি চেহারা জন্য জুম ইন।

#a, #b {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  color:green;
  opacity:0.5;
}
#a {
  color:red;
}
#b {
  color:green;
}

<pre id="a">
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>
    <div style="font-family:monospace" id="b">
      <div style="text-indent: 0">sun</div> <br/>
      <div style="text-indent: 4ch">mercury</div> <br/>
      <div style="text-indent: 4ch">venus</div> <br/>
      <div style="text-indent: 8ch">earth</div> <br/>
      <div style="text-indent: 8ch">mars</div> <br/>
      <div style="text-indent: 12ch">jupiter</div> <br/>
      <div style="text-indent: 4ch">saturn</div> <br/>
    </div>

Comments

ওঁটা খুব সুন্দর! আমি এই ধারণাটি চেষ্টা করেছিলাম <pre>তবে <body>মার্জিনের সাথে ট্যাগের অদ্ভুত দিকগুলির কারণে আমি তাদের সারিবদ্ধ করতে পারি না। আপনার স্টাইলগুলি #a, #b { ... }এটিকে সঠিকভাবে কাজ করে দেখায়।

— Purplejacket

Answer 6

Iframes ব্যবহার করে একে অপরের উপরে দুটি পৃষ্ঠাকে ওভারলে করুন। এটি আপনাকে দুটি পৃষ্ঠার মধ্যে কোনও পার্থক্য দেখতে দেয়।

main.html:

<iframe src="doc1.html"></iframe>
<iframe src="doc2.html" style="opacity:0.5"></iframe>
<style>

html, body {
    margin:0;
    height:100%;
}
iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

</style>

doc1.html:

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>

doc2.html

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

(আমার সন্দেহ হয় স্ট্যাক স্নিপেটস ব্যবহার করে এটি করার একটি উপায় আছে me আমাকে আলোকিত করতে নির্দ্বিধায় অনুভব করুন)

Answer 7

এখানে কিছু জটিল এবং চতুর কোড পদ্ধতি রয়েছে, সুতরাং এখানে একটি সহজ উপায়,

এর একটির স্ক্রিনশট নিন, একটি চিত্র সম্পাদক এ এটি খুলুন যা ফটোশপের মতো স্বচ্ছতা সমর্থন করে,

এটিকে আগে রেখে দিন, তারপরে স্ক্রিনটি আপনার সিএসএসের উপায়ে প্রদর্শন করুন এবং এটিকে দ্বিতীয় আটকানো চিত্রটিকে 50% এর অস্বচ্ছতার সাথে সেট করে পেস্ট করুন এবং দেখুন যে তারা লাইন আপ করে।

Comments

পৃষ্ঠাটি স্ক্রিনে ফিট করার জন্য যদি দীর্ঘ হয় তবে কী হবে?

— Purplejacket

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

— স্টিভ্যাক্স

হ্যাঁ. এইচটিএমএল একটি স্ট্রিং। স্ট্রিং মুদ্রণের জন্য কেবল সিআরএল বা অন্য কোনও পদ্ধতি ব্যবহার করুন এবং তারপরে এটি তুলনা করুন। এগুলি এখানে ওভার ইঞ্জিনিয়ারড উদাহরণগুলি রনিন রাউন্ড।

— ইউসুসিপস

@ পুরপজ্যাককেট, পুরো অ্যাপ্লিকেশনটির স্ক্রিনশট, Ctrl + শিফট + প্রিন্ট স্ক্রিন,

— বার্কর্ম্ন

Answer 8

আমি এখন পর্যন্ত দেখেছি, খুব কম লোকই প্রকৃত পরীক্ষার সরঞ্জামগুলি উল্লেখ করছেন।

আপনার ব্যবহারের জন্য প্রচুর সরঞ্জাম রয়েছে (প্রায়শই বড় ফ্রেমওয়ার্কের অংশ):

• Resemble.js
• Puppeteer-স্ক্রিনশট-পরীক্ষক
• প্রেতাত্মা

এই তালিকা থেকে নেওয়া কয়েকজনের নাম জানাতে । হতে পারে নিজের জন্য অনুসন্ধান করুন এবং আপনার পরিবেশের জন্য উপযুক্ত একটি চয়ন করুন।

আপনি যদি একটি টেকসই অটোমেশন তৈরি করতে চান তবে হ্যাকগুলির উপর নির্ভর করবেন না। এটি 'কেবল' কিউএ হতে পারে তবে ভবিষ্যতে প্রকাশে আপনার ** মারাত্মকভাবে সংরক্ষণ করতে পারে।