javascript — Как анализировать, сравнивать и связывать несколько изображений с Resemble JS?

Как анализировать, сравнивать и связывать несколько изображений с Resemble JS?

У меня есть несколько изображений ~ 2300 изображений, и каждое из них представляет отдельное событие в прошлом или будущем. Я хочу связать каждое изображение события на основе имени файла (например, event-05-1990.jpeg, event-06-2030.jpeg) с датой ex. 24/05/1990, и когда я вставляю дату в календарь формата даты или во входной текст, тогда Resemble.js берет изображение event-05-1990.jpeg, связанное с введенной датой, и сравнивает его с остальными из 2299 изображений и печатают проценты соответствия для каждой даты, связанной с файлом изображения события. У нас есть только месяц и год, поскольку сравнение даты и цвета не указано, только другие функции сравнения. Я думаю, что так и должно быть: Даты: декларация ассоциаций 05/1990 == event-05-1990.jpeg 06/1990 == event-06-1990.jpeg и т. Д. Затем вставьте дату во входной текст и нажмите Нажмите кнопку, после нажатия кнопки сравните вставленную дату, чтобы определить связанный файл, возьмите этот файл с Resemble JS, сравните с остальными изображениями и напечатайте процентное соотношение для каждого файла или каждой даты, связанной с каждым файлом события. Это возможно? Может кто-то показать небольшой пример реализации ассоциации и автоматического сравнения сравнения, thx.Here пример, но только для двух файлов вручную: https://rsmbl.github.io/Resemble.js/ Код для использования:

 $(function() { var $target = $("#drop-zone"); function dropZone($target, onDrop) { $target .bind("dragover", function() { $target.addClass("drag-over"); return false; }) .bind("dragend", function() { $target.removeClass("drag-over"); return false; }) .bind("dragleave", function() { $target.removeClass("drag-over"); return false; }) .bind("drop", function(event) { var file = event.originalEvent.dataTransfer.files[0]; event.stopPropagation(); event.preventDefault(); $target.removeClass("drag-over"); var droppedImage = new Image(); var fileReader = new FileReader(); fileReader.onload = function(event) { droppedImage.src = event.target.result; $target.html(droppedImage); }; fileReader.readAsDataURL(file); onDrop(file); }); } dropZone($target, function(file) { resemble(file).onComplete(function(data) { $("#image-data").show(); $("#red").css("width", data.red   "%"); $("#green").css("width", data.green   "%"); $("#blue").css("width", data.blue   "%"); $("#alpha").css("width", data.alpha   "%"); $("#brightness").css("width", data.brightness   "%"); $("#white").css("width", data.white   "%"); $("#black").css("width", data.black   "%"); }); }); function onComplete(data) { var time = Date.now(); var diffImage = new Image(); diffImage.src = data.getImageDataUrl(); $("#image-diff").html(diffImage); $(diffImage).click(function() { var w = window.open("about:blank", "_blank"); var html = w.document.documentElement; var body = w.document.body; html.style.margin = 0; html.style.padding = 0; body.style.margin = 0; body.style.padding = 0; var img = w.document.createElement("img"); img.src = diffImage.src; img.alt = "image diff"; img.style.maxWidth = "100%"; img.addEventListener("click", function() { this.style.maxWidth = this.style.maxWidth === "100%" ? "" : "100%"; }); body.appendChild(img); }); $(".buttons").show(); if (data.misMatchPercentage == 0) { $("#thesame").show(); $("#diff-results").hide(); } else { $("#mismatch").text(data.misMatchPercentage); if (!data.isSameDimensions) { $("#differentdimensions").show(); } else { $("#differentdimensions").hide(); } $("#diff-results").show(); $("#thesame").hide(); } } var file1; var file2; var resembleControl; dropZone($("#dropzone1"), function(file) { file1 = file; if (file2) { resembleControl = resemble(file) .compareTo(file2) .onComplete(onComplete); } }); dropZone($("#dropzone2"), function(file) { file2 = file; if (file1) { resembleControl = resemble(file) .compareTo(file1) .onComplete(onComplete); } }); var buttons = $(".buttons button"); buttons.click(function() { var $this = $(this); $this .parent(".buttons") .find("button") .removeClass("active"); $this.addClass("active"); if ($this.is("#raw")) { resembleControl.ignoreNothing(); } else if ($this.is("#less")) { resembleControl.ignoreLess(); } if ($this.is("#colors")) { resembleControl.ignoreColors(); } else if ($this.is("#antialiasing")) { resembleControl.ignoreAntialiasing(); } else if ($this.is("#alpha")) { resembleControl.ignoreAlpha(); } else if ($this.is("#same-size")) { resembleControl.scaleToSameSize(); } else if ($this.is("#original-size")) { resembleControl.useOriginalSize(); } else if ($this.is("#pink")) { resembleControl .outputSettings({ errorColor: { red: 255, green: 0, blue: 255 } }) .repaint(); } else if ($this.is("#yellow")) { resembleControl .outputSettings({ errorColor: { red: 255, green: 255, blue: 0 } }) .repaint(); } else if ($this.is("#flat")) { resembleControl .outputSettings({ errorType: "flat" }) .repaint(); } else if ($this.is("#movement")) { resembleControl .outputSettings({ errorType: "movement" }) .repaint(); } else if ($this.is("#flatDifferenceIntensity")) { resembleControl .outputSettings({ errorType: "flatDifferenceIntensity" }) .repaint(); } else if ($this.is("#movementDifferenceIntensity")) { resembleControl .outputSettings({ errorType: "movementDifferenceIntensity" }) .repaint(); } else if ($this.is("#diffOnly")) { resembleControl .outputSettings({ errorType: "diffOnly" }) .repaint(); } else if ($this.is("#opaque")) { resembleControl .outputSettings({ transparency: 1 }) .repaint(); } else if ($this.is("#transparent")) { resembleControl .outputSettings({ transparency: 0.3 }) .repaint(); } else if ($this.is("#boundingBox")) { resembleControl .outputSettings({ boundingBox: { left: $("#bounding-box-x1").val(), top: $("#bounding-box-y1").val(), right: $("#bounding-box-x2").val(), bottom: $("#bounding-box-y2").val() } }) .repaint(); $this.removeClass("active"); } else if ($this.is("#ignoredBox")) { resembleControl .outputSettings({ ignoredBox: { left: $("#ignored-box-x1").val(), top: $("#ignored-box-y1").val(), right: $("#ignored-box-x2").val(), bottom: $("#ignored-box-y2").val() } }) .repaint(); $this.removeClass("active"); } else if ($this.is("#ignoredColor")) { resembleControl .outputSettings({ ignoreAreasColoredWith: { r: parseInt($("#ignored-color-r").val()), g: parseInt($("#ignored-color-g").val()), b: parseInt($("#ignored-color-b").val()), a: parseInt($("#ignored-color-a").val()) } }) .repaint(); $this.removeClass("active"); } }); (function() { var xhr = new XMLHttpRequest(); var xhr2 = new XMLHttpRequest(); var xhr3 = new XMLHttpRequest(); var done = $.Deferred(); var dtwo = $.Deferred(); var dthree = $.Deferred(); xhr.open("GET", "demoassets/People.jpg", true); xhr.responseType = "blob"; xhr.onload = function(e) { done.resolve(this.response); }; xhr.send(); xhr2.open("GET", "demoassets/People2.jpg", true); xhr2.responseType = "blob"; xhr2.onload = function(e) { dtwo.resolve(this.response); }; xhr2.send(); xhr3.open("GET", "demoassets/PeopleAlpha.png", true); xhr3.responseType = "blob"; xhr3.onload = function(e) { dthree.resolve(this.response); }; xhr3.send(); $("#example-images").click(function() { $("#dropzone1").html('{amp}lt;img src="demoassets/People.jpg"/{amp}gt;'); $("#dropzone2").html('{amp}lt;img src="demoassets/People2.jpg"/{amp}gt;'); $.when(done, dtwo).done(function(file, file1) { if (typeof FileReader === "undefined") { resembleControl = resemble("demoassets/People.jpg") .compareTo("demoassets/People2.jpg") .onComplete(onComplete); } else { resembleControl = resemble(file) .compareTo(file1) .onComplete(onComplete); } }); return false; }); $("#example-images-alpha").click(function() { $("#dropzone1").html('{amp}lt;img src="demoassets/People.jpg"/{amp}gt;'); $("#dropzone2").html('{amp}lt;img src="demoassets/PeopleAlpha.png"/{amp}gt;'); $.when(done, dthree).done(function(file, file1) { if (typeof FileReader === "undefined") { resembleControl = resemble("demoassets/People.jpg") .compareTo("demoassets/PeopleAlpha.png") .onComplete(onComplete); } else { resembleControl = resemble(file) .compareTo(file1) .onComplete(onComplete); } }); return false; }); })(); }); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector