PNG ছবি তুলনা করতে JavaScript API

LooksSame দিয়ে শুরু করা

NPM এর মাধ্যমে LooksSameis ইনস্টল করার প্রস্তাবিত উপায়। এটি ইনস্টল করতে নিম্নলিখিত কমান্ড ব্যবহার করুন.

 npm install looks-same 

জাভাস্ক্রিপ্ট অ্যাপের ভিতরে PNG ছবি তুলনা করুন

LooksSame লাইব্রেরি সফ্টওয়্যার প্রোগ্রামারদের Node.js ব্যবহার করে তাদের PNG ছবিগুলিকে প্রোগ্রাম্যাটিকভাবে তুলনা করার ক্ষমতা দেয়৷ আপনাকে একটি প্যারামিটার হিসাবে PNG চিত্র বা বাফারের সঠিক পথ প্রদান করতে হবে। ইমেজ তুলনার একটি সহজ উদাহরণ হল ইমেজের সাথে DOM এলিমেন্টের স্ক্রিনশট নেওয়া এবং লাইব্রেরি ব্যবহার করে স্থানীয় ইমেজের সাথে তুলনা করা। এছাড়াও আপনি RequestLogger ব্যবহার করতে পারেন ছবির জন্য একটি অনুরোধ লগ করতে এবং Buffer.compare() পদ্ধতি ব্যবহার করে স্থানীয় ফাইলের সাথে রেসপন্স বডি তুলনা করতে পারেন।

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

Antialiasing উপেক্ষা করে PNG ছবি তুলনা করুন

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

Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The অ্যান্টি-এলাইজিং technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with অ্যান্টি-এলাইজিং issues by ignoring certain of the pixels where অ্যান্টি-এলাইজিং is likely to have occurred. These differences will be ignored by default.

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

কেরেট উপেক্ষা করে ছবি তুলনা

বিনামূল্যে LooksSame লাইব্রেরি তাদের নিজস্ব অ্যাপ্লিকেশনের মধ্যে দুটি ছবি তুলনা করার সময় ইনপুট বাক্সে ক্যারেট উপেক্ষা করার জন্য কার্যকারিতা প্রদান করেছে। টেক্সট ইনপুট এলিমেন্টে টেক্সট ক্যারেট ভিজ্যুয়াল রিগ্রেশন টাস্কের জন্য একটি বেদনা কারণ এটি সবসময় জ্বলজ্বল করে। কখনও কখনও দুটি টেক্সট বক্স বা ইনপুট বক্সের ছবি তুলনা করার সময়, ইমেজ গিভ ক্যারেটের কারণে পিক্সেল পার্থক্যের জন্য তুলনা ব্যর্থ হয়। তাই আপনি এই ধরনের পার্থক্য উপেক্ষা নিষ্ক্রিয় করতে ক্যারেট বিকল্পটি উপেক্ষা করতে পারেন।