1. Ürün:% s
  2.   resim
  3.   JavaScript
  4.   LooksSame
 
  

PNG Görüntülerini Karşılaştırmak için JavaScript API'si

JavaScript Uygulamaları içindeki PNG görüntülerini karşılaştırmayı destekleyen Açık Kaynak JavaScript Kitaplığı. Kenar yumuşatmayı ve düzeltme işaretini yok sayarak PNG görüntülerini karşılaştırmayı destekler. 

JavaScript kullanarak görselleri görsellerle karşılaştırmak oldukça zor ve meşakkatli olabilir. Yanlış aleti seçmek de performansı büyük ölçüde etkileyebilir. LookSame, JavaScript uygulamaları içindeki PNG görüntülerini karşılaştırma işlevi içeren ve her makinede kullanıma hazır şekilde çalışacak olan açık kaynaklı bir JavaScript kitaplığıdır. Kütüphane, insanın renk algısı dikkate alınarak oluşturulmuştur. Kütüphane esas olarak Gemini yardımcı programı için görsel regresyon testi ihtiyaçları için oluşturulmuştur.

Bu kitaplık, geliştiricilerin JavaScript komutlarını kullanarak iki PNG görüntüsü arasındaki farkı hızlı ve kolay bir şekilde karşılaştırmasını sağlar. Dosyaların yollarını veya arabellek içindeki görüntüleri sağlayarak PNG görüntülerinin işlenmesi için destek sağlamıştır. Varsayılan ayarların kullanılması yalnızca fark edilebilir farkı belirleyecektir ve herhangi bir özel farklılık tespit etmeniz gerekiyorsa lütfen katı seçeneği seçin.

Kitaplık, düzeltme işaretini yok sayan resimleri karşılaştırma, kenar yumuşatmayı yok sayarak resimleri karşılaştırma, fark sınırlarını alma, fark kümeleri alma, fark resimleri oluşturma, fark resimlerini tampon olarak oluşturma, renkleri karşılaştırma gibi resim karşılaştırmalarıyla ilgili birkaç önemli özellik için destek sağlamıştır. çok daha fazlası.

Previous Next

LookSame'e Başlarken

LookSameis'i NPM aracılığıyla kurmanın önerilen yolu. Lütfen yüklemek için aşağıdaki komutu kullanın.

LookSame'i NPM aracılığıyla kurun

 npm install looks-same

JavaScript Uygulamalarındaki PNG Görüntülerini Karşılaştırın

LookSame kitaplığı, yazılım programcılarına PNG görüntülerini Node.js kullanarak programlı olarak karşılaştırma olanağı sağlar. Parametre olarak PNG görüntülerine veya arabelleğe doğru yolu sağlamanız gerekir. Görüntü karşılaştırmasının basit bir örneği, görüntüyle birlikte DOM öğesinin ekran görüntüsünü almak ve yerel görüntüyle karşılaştırmak için kitaplığı kullanmak olabilir. Ayrıca, görüntü için bir isteği günlüğe kaydetmek ve yanıt gövdesini Buffer.compare() yöntemini kullanarak yerel dosyayla karşılaştırmak için RequestLogger'ı da kullanabilirsiniz.

Karşılaştırma NG Images via JavaScript API

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

Antialiasing'i Yok Sayarak PNG Görüntülerini Karşılaştırın

Her görüntü piksellerden oluşur ve bu görüntüleri karşılaştırırken görüntüdeki her pikselin rengini görüntünün karşılık gelen konumundaki piksel rengiyle karşılaştırırsınız. Bu durumda, bazı pikseller farklıysa, görüntülerin eşleşmediğini söyleyebilirsiniz. Genellikle, bir görüntünün çözünürlüğü, işlemcinin düzgün çizgileri düzgün bir şekilde oluşturması için çok düşük olduğunda, örtüşme gerçekleşir. Daha pürüzsüz bir görünüm vermek için anti-aliasing tekniği uygulanır ve böylece ortam başına farklı karşılaştırma sonuçları alırsınız. Bazı görüntüler, kenar yumuşatma nedeniyle karşılaştırılırken farklılıklar gösterir. LookSame kitaplığı, kenar yumuşatmanın meydana gelmiş olabileceği belirli pikselleri yok sayarak kenar yumuşatma sorunlarıyla ilgilenir. Bu farklılıklar varsayılan olarak yoksayılacaktır.

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

Antialiasing & Care'i JavaScript aracılığıyla görmezden gelen görüntüler

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

Caret'i Yok Sayarak Görüntü Karşılaştırması

Ücretsiz LookSame kitaplığı, kendi uygulamaları içinde iki görüntüyü karşılaştırırken giriş kutularındaki düzeltme işaretini yok sayma işlevi sağlar. Metin giriş öğesindeki metin düzeltme işareti, her zaman yanıp söndüğü için görsel regresyon görevleri için bir sorundur. Bazen iki metin kutusu veya giriş kutusu görüntülerini karşılaştırırken, görüntü düzeltmesi nedeniyle piksel farkı için karşılaştırma başarısız oluyor. Böylece, bu tür farkları yok saymayı devre dışı bırakmak için şapka seçeneğini yok sayabilirsiniz.

 Türkçe