1. Məhsullar
  2.   Şəkil
  3.   JavaScript
  4.   LooksSame
 
  

PNG Şəkilləri Müqayisə etmək üçün JavaScript API

JavaScript Tətbiqlərində PNG şəkillərinin müqayisəsini dəstəkləyən Açıq Mənbəli JavaScript Kitabxanası. O, antialiasingə məhəl qoymayaraq və karetə məhəl qoymayaraq PNG şəkillərini müqayisə etməyi dəstəkləyir. 

JavaScript istifadə edərək şəkilləri şəkillərlə müqayisə etmək olduqca çətin və çətin ola bilər. Yanlış alət seçmək də performansa böyük təsir göstərə bilər. LooksSame açıq mənbəli JavaScript kitabxanasıdır, JavaScript proqramları daxilində PNG şəkillərini müqayisə etmək funksiyasını özündə cəmləşdirir və hər maşında qutudan kənarda işləyəcək. Kitabxana insanın rəng qavrayışı nəzərə alınmaqla yaradılmışdır. Kitabxana əsasən Gemini utiliti üçün vizual reqressiya testinin ehtiyacları üçün yaradılmışdır.

Bu kitabxana tərtibatçılara JavaScript əmrlərindən istifadə edərək asanlıqla iki PNG şəkli arasındakı fərqi tez və asanlıqla müqayisə etməyə imkan verir. Fayllara və ya buferin içindəki şəkillərə yollar təqdim etməklə PNG şəkillərinin işlənməsi üçün dəstək təmin etmişdir. Defolt parametrlərdən istifadə etmək yalnız nəzərə çarpan fərqi müəyyən edəcək və əgər hər hansı xüsusi fərqləri aşkar etmək lazımdırsa, lütfən, ciddi variantı seçin.

Kitabxana şəkil müqayisəsi ilə bağlı bir sıra mühüm funksiyaları dəstəkləmişdir, məsələn, karetə məhəl qoymadan şəkilləri müqayisə etmək, antialiasingə məhəl qoymadan şəkilləri müqayisə etmək, fərqli sərhədlər əldə etmək, fərqli klasterlər əldə etmək, fərqli şəkillər yaratmaq, bufer kimi fərqli şəkillər qurmaq, rəngləri müqayisə etmək və daha çox.

Previous Next

LooksSame ilə işə başlamaq

LooksSameis-i NPM vasitəsilə quraşdırmağın tövsiyə olunan yolu. Quraşdırmaq üçün aşağıdakı əmrdən istifadə edin.

LooksSame-i NPM vasitəsilə quraşdırın

 npm install looks-same

JavaScript Tətbiqlərində PNG Şəkillərini müqayisə edin

LooksSame kitabxanası proqram proqramçılarına Node.js istifadə edərək PNG şəkillərini proqramlı şəkildə müqayisə etmək imkanı verir. PNG şəkillərinə və ya buferə parametr kimi düzgün yolu təqdim etməlisiniz. Şəkil müqayisəsinin sadə bir nümunəsi, şəkil ilə DOM elementinin ekran görüntüsünü çəkmək və onu yerli görüntü ilə müqayisə etmək üçün kitabxanadan istifadə etmək ola bilər. Siz həmçinin şəkil üçün sorğu daxil etmək və Buffer.compare() metodundan istifadə edərək cavab orqanını yerli fayl ilə müqayisə etmək üçün RequestLogger-dən istifadə edə bilərsiniz.

PNG şəkillərini JavaScript API vasitəsilə müqayisə edin

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

Antialiasing-ə məhəl qoymayaraq PNG şəkillərini müqayisə edin

Hər bir şəkil piksellərdən ibarətdir və bu şəkilləri müqayisə edərkən siz bir şəkildəki hər pikselin rəngini şəklin müvafiq yerindəki piksel rəngi ilə müqayisə edirsiniz. Beləliklə, bəzi piksellər bir-birinə bənzəmirsə, o zaman şəkillərin uyğun olmadığını deyə bilərsiniz. Adətən, ləqəb prosessorun hamar xətləri düzgün göstərməsi üçün təsvirin qətnaməsi çox aşağı olduqda baş verir. Daha hamar bir görünüş vermək üçün anti-aliasing texnikası tətbiq edilir və beləliklə, hər mühitə görə fərqli müqayisə nəticələri əldə edirsiniz. Bəzi şəkillərdə antialiasing səbəbindən onları müqayisə edərkən fərqlər var. LooksSame kitabxanası anti-aliasing baş vermə ehtimalı olan bəzi piksellərə məhəl qoymadan anti-aliasing problemləri ilə məşğul olur. Bu fərqlər standart olaraq nəzərə alınmayacaq.

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 anti-aliasing 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 anti-aliasing issues by ignoring certain of the pixels where anti-aliasing is likely to have occurred. These differences will be ignored by default.

JavaScript vasitəsilə Antialiasing & Caret'ə məhəl qoymayaraq şəkilləri müqayisə edin

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

Şəkillərin Müqayisə Karetinə məhəl qoymayaraq

Pulsuz LooksSame kitabxanası öz tətbiqlərindəki iki şəkli müqayisə edərkən giriş qutularında karetə məhəl qoymamaq üçün funksionallıq təmin etmişdir. Mətn daxiletmə elementindəki mətn karetası vizual reqressiya tapşırıqları üçün ağrılıdır, çünki o, həmişə yanıb-sönür. Bəzən iki mətn qutusunu və ya daxiletmə qutularını müqayisə edərkən, karet verilən təsvirə görə piksel fərqinə görə müqayisə uğursuz olur. Beləliklə, bu cür fərqlərə məhəl qoymamağı aradan qaldırmaq üçün karet seçimini rədd edə bilərsiniz.

 Azəri