API JavaScript nguồn mở để so sánh hình ảnh
Thư viện JavaScript cho phép các nhà lập trình Phần mềm so sánh hai hình ảnh trong nhiều môi trường như Node hoặc trình duyệt, v.v.
Đôi khi cần phải so sánh hai hình ảnh để xem chúng giống nhau như thế nào. Đây là một quá trình rất phức tạp và đòi hỏi kiến thức tốt để hoàn thành nó. Thư viện pixelmatch mã nguồn mở có thể là một lựa chọn rất hữu ích để so sánh hai hình ảnh trong bất kỳ môi trường nào. Vì thư viện không có phụ thuộc và hoạt động trên các mảng dữ liệu hình ảnh được nhập thô, nên có thể được sử dụng trong nhiều môi trường như Node hoặc trình duyệt, v.v.
Pixelmatch có kích thước rất nhỏ và sử dụng rất đơn giản nhưng là một thư viện so sánh hình ảnh cấp pixel rất nhanh. Nó được viết bằng JavaScript và ban đầu được tạo ra để so sánh ảnh chụp màn hình trong các thử nghiệm. Thư viện hỗ trợ các tính năng như phát hiện pixel chống răng cưa và chỉ số đo sự khác biệt màu sắc theo cảm nhận.
Phát hiện khử răng cưa là một tính năng rất hữu ích vì người ta thường quan sát thấy rằng việc hiển thị cùng một dữ liệu trên các ứng dụng, thiết bị hoặc hệ điều hành khác nhau có thể tạo ra các kết quả hơi khác nhau. Nhưng chủ yếu là nên bỏ qua những khác biệt nhỏ này hoặc thử nghiệm để thu thập dữ liệu có ý nghĩa hơn.
Bắt đầu với pixelmatch
Cách được khuyến nghị để cài đặt pixelmatch là thông qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.
Cài đặt pixelmatch qua NPM
npm install pixelmatch Kiểm tra đối sánh pixel là gì?
Nếu bạn cần so sánh hai hình ảnh để kiểm tra xem có bất kỳ sự khác biệt nào giữa thì bạn có thể sử dụng kiểm tra đối sánh pixel cho mục đích này. Có thể có hai loại hình ảnh, hình ảnh gốc và hình ảnh đã sửa đổi hình ảnh . Bạn có thể sử dụng một ứng dụng có thể tìm nạp hình ảnh từ ảnh chụp màn hình ứng dụng của bạn và sau đó, thư viện so sánh hình ảnh có thể được sử dụng để so sánh những hình ảnh này và hiển thị kết quả.
So sánh hình ảnh qua thư viện JavaScript
Thư viện mã nguồn mở pixelmatch đã cung cấp chức năng hoàn chỉnh để so sánh hình ảnh bên trong các ứng dụng JavaScript một cách dễ dàng. Các nhà phát triển phần mềm cần cung cấp dữ liệu hình ảnh để so sánh cũng như đầu ra nơi cần ghi dữ liệu hình ảnh với sự khác biệt. Họ cũng cần cung cấp kích thước là chiều rộng và chiều cao của ba hình ảnh. Bạn có thể sử dụng tùy chọn ngưỡng cho phép các hình ảnh hơi khác nhau, điều này có thể tuyệt vời trong một số trường hợp. Xin lưu ý rằng thư viện pixelmatch yêu cầu hình ảnh phải có cùng kích thước.
Hình ảnh so sánh trực tuyến với JavaScript API
const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);
So sánh hình ảnh ở Node. Js by pixelmatch
const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
