1. Produk
  2.   Imej
  3.   JavaScript
  4.   LooksSame
 
  

API JavaScript untuk Membandingkan Imej PNG

Perpustakaan JavaScript Sumber Terbuka yang menyokong membandingkan imej PNG di dalam Apl JavaScript. Ia menyokong membandingkan imej PNG dengan Mengabaikan antialiasing & dengan mengabaikan karet. 

Membandingkan imej dengan imej menggunakan JavaScript boleh menjadi agak sukar dan mencabar. Memilih alat yang salah juga boleh mempengaruhi prestasi. LooksSame ialah perpustakaan JavaScript sumber terbuka yang telah menyertakan fungsi untuk membandingkan imej PNG dalam aplikasi JavaScript dan akan berfungsi di luar kotak pada setiap mesin. Perpustakaan telah diwujudkan sambil mengambil kira persepsi warna manusia. Perpustakaan ini dicipta terutamanya untuk keperluan ujian regresi visual untuk utiliti Gemini.

Pustaka ini membolehkan pembangun membandingkan dengan cepat dan mudah perbezaan antara dua imej PNG dengan mudah menggunakan arahan JavaScript. Ia telah menyediakan sokongan untuk memproses imej PNG sama ada dengan menyediakan laluan ke fail atau imej di dalam penimbal. Menggunakan tetapan lalai hanya akan mengenal pasti perbezaan yang ketara dan jika anda perlu mengesan sebarang perbezaan tertentu sila pilih pilihan yang ketat.

Perpustakaan telah menyediakan sokongan untuk beberapa ciri penting yang berkaitan dengan perbandingan imej seperti membandingkan imej dengan mengabaikan karet, membandingkan imej dengan mengabaikan antialiasing, mendapat sempadan perbezaan, mendapatkan kelompok perbezaan, membina imej berbeza, membina imej berbeza sebagai penimbal, membandingkan warna, dan banyak lagi.

Previous Next

Bermula dengan LooksSame

Cara yang disyorkan untuk memasang LooksSameis melalui NPM. Sila gunakan arahan berikut untuk memasangnya.

Pasang LooksSame melalui NPM

 npm install looks-same

Bandingkan Imej PNG dalam Apl JavaScript

Pustaka LooksSame memberikan pengaturcara perisian keupayaan untuk membandingkan imej PNG mereka secara pengaturcaraan menggunakan Node.js. Anda perlu memberikan laluan yang betul kepada imej PNG atau penimbal sebagai parameter. Satu contoh ringkas perbandingan imej adalah dengan mengambil tangkapan skrin elemen DOM dengan imej dan menggunakan perpustakaan untuk membandingkannya dengan imej tempatan. Anda juga boleh menggunakan RequestLogger untuk log permintaan untuk imej dan membandingkan badan respons dengan fail setempat menggunakan kaedah Buffer.compare().

Bandingkan Imej PNG melalui API JavaScript

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

Bandingkan Imej PNG dengan Mengabaikan Antialiasing

Setiap imej terdiri daripada piksel dan semasa membandingkan imej ini anda membandingkan setiap warna piksel dalam imej satu dengan warna piksel di lokasi imej yang sepadan. Jadi sekiranya, sesetengah piksel adalah berbeza, maka anda boleh memberitahu imej tidak sepadan. Biasanya, aliasing berlaku apabila peleraian imej sangat rendah untuk pemproses menghasilkan garis halus dengan betul. Teknik anti-aliasing digunakan untuk memberikan penampilan yang lebih lancar dan dengan itu anda mendapat hasil perbandingan yang berbeza bagi setiap persekitaran. Sesetengah imej mempunyai perbezaan semasa membandingkannya kerana antialiasing. Pustaka LooksSame menangani isu anti-aliasing dengan mengabaikan piksel tertentu yang kemungkinan anti-aliasing berlaku. Perbezaan ini akan diabaikan secara lalai.

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

Bandingkan Imej dengan Mengabaikan Antialiasing & Caret melalui JavaScript

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

Perbandingan Imej dengan Mengabaikan Caret

Pustaka LooksSame percuma telah menyediakan fungsi untuk mengabaikan karet pada kotak input sambil membandingkan dua imej di dalam aplikasi mereka sendiri. Karet teks dalam elemen input teks adalah sukar untuk tugas regresi visual kerana ia sentiasa berkelip. Kadang-kadang apabila membandingkan dua kotak teks atau kotak input imej, kerana imej memberikan karet perbandingan gagal untuk perbezaan piksel. Jadi anda boleh mengabaikan pilihan karet untuk melumpuhkan mengabaikan perbezaan tersebut.

 Melayu