API JavaScript để so sánh hình ảnh PNG

Bắt đầu với ngoại hình

Cách được khuyến nghị để cài đặt LookSameis qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.

 npm install looks-same 

So sánh các hình ảnh PNG bên trong các ứng dụng JavaScript

Thư viện LookSame cung cấp cho các nhà lập trình phần mềm khả năng lập trình so sánh các hình ảnh PNG của họ bằng cách sử dụng Node.js. Bạn cần cung cấp đường dẫn chính xác đến hình ảnh PNG hoặc bộ đệm làm tham số. Một ví dụ đơn giản về so sánh hình ảnh có thể là chụp ảnh màn hình của phần tử DOM với hình ảnh và sử dụng thư viện để so sánh nó với hình ảnh cục bộ. Bạn cũng có thể sử dụng RequestLogger để ghi lại một yêu cầu cho hình ảnh và so sánh nội dung phản hồi với tệp cục bộ bằng phương thức Buffer.compare ().

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

So sánh hình ảnh PNG bằng cách bỏ qua khử răng cưa

Mọi hình ảnh đều được tạo thành từ các pixel và trong khi so sánh các hình ảnh này, bạn so sánh màu của mọi pixel trong hình ảnh một với màu pixel ở vị trí tương ứng của hình ảnh. Vì vậy, trong trường hợp, một số pixel không giống nhau, thì bạn có thể biết các hình ảnh không khớp. Thông thường, hiện tượng răng cưa xảy ra khi độ phân giải của hình ảnh rất thấp để bộ xử lý hiển thị chính xác các đường mịn. Kỹ thuật khử răng cưa được áp dụng để mang lại vẻ ngoài mượt mà hơn và do đó bạn nhận được các kết quả so sánh khác nhau cho mỗi môi trường. Một số hình ảnh có sự khác biệt trong khi so sánh chúng do khử răng cưa. Thư viện LookSame giải quyết các vấn đề khử răng cưa bằng cách bỏ qua một số pixel nhất định có khả năng xảy ra khử răng cưa. Những khác biệt này sẽ bị bỏ qua theo mặc định.

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 khử răng cưa 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 khử răng cưa issues by ignoring certain of the pixels where khử răng cưa 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);

So sánh hình ảnh bằng cách bỏ qua dấu mũ

Thư viện LookSame miễn phí đã cung cấp chức năng bỏ qua dấu mũ trên các hộp nhập liệu trong khi so sánh hai hình ảnh bên trong ứng dụng của riêng chúng. Dấu mũ văn bản trong phần tử nhập văn bản là một khó khăn cho các tác vụ hồi quy trực quan vì nó luôn nhấp nháy. Đôi khi khi so sánh hai hộp văn bản hoặc hình ảnh hộp nhập liệu, do hình ảnh cung cấp dấu mũ nên so sánh không thành công về sự khác biệt pixel. Vì vậy, bạn có thể bỏ qua tùy chọn dấu mũ để tắt bỏ qua các khác biệt đó.