zwei bilder vergleichen

J

jumbo125

Member
hallo zusammen

ich erstelle mittels einer function alle 1000ms ein bild in base64 code. anschlie0end speichere ich es abwechselnd in <img src"..." id="1" und in <img src="..." id="2"

also abwechselnd in einen img tag.

nun möchte ich die zwei bilder vergleichen, ob es die exakt gleichen sind (teilweise ändern sich nur kleinigkeiten im bild).
hat jemand eine idee? mit imgediff schaffe ich es leider nicht.

Wie gesagt: Ziel wäre es, einfach die beiden image (mit src="base64code") miteinander zu vergleichen und zu sagen: gleich oder nicht gleich.
leider ist der base64code auch bei den gleichen bilder nicht exakt ident, wenn ich die zwei strings vergleiche.
habt ihr eine idee?
 
Andreas-B schrieb:
Ich kenne imgediff nicht. Daher weiß ich nicht was das macht.
Wenn du den Vergleich im Frontend machen möchtest, hast du schonmal sowas wie https://github.com/mapbox/pixelmatch versucht? Du bekommst ein Diffbild raus, das dir genau die unterschiedlichen Pixel zeigt.
Zum Vergrößern anklicken....
ja, auch hier gibt es die möglichkeit ein true oder false zu bekommen.
ich arbeite aber nicht mit node was prinzipiel kein problem macht, da ich <script src="https://bundle.run/pixelmatch"></script> das ganze einbinden kann.
ich würde es aber gerne local verwenden. geht das indem ich das release downlaode und auf dem server lege? um von dort auf die pixelmatch zuzugreifen
 
hm, und dennoch klappt es nicht.
der fehler liegt beim einbinden denke ich...

Wenn ich den link auf der github seite verwende:

Code: 
<script src="https://bundle.run/pixelmatch"></script>

wird keine datei gefunden, der pfad existiert nicht
wenn ich das letzte release runterlade und einbinde
Code: 
<script src="myserver/js/pixelmatch/bin/pixelmatch"></script>

erhalte ich folgende fehlermedlung
Code: 
const PNG = require('pngjs').PNG;
ReferenceError: require is not defined
 
danke dir, verzeihung.
aber dann kommt die fehlermeldung:
Code: 
'use strict';


module.exports = pixelmatch;

Code: 
module is not defined
 
Stimmt, da wird doch ein Modul exportiert.

Du könntest die Zeile module.exports = pixelmatch; in window.pixelmatch = pixelmatch; umschreiben, dann ist das Modul unter window.pixelmatch erreichbar.
 
super danke, jetzt kommt kein fehler mehr.
darf ich noch fragen, ebzügl der canvas programmierung....
ich müsste zwei canvas vergleichen.
die erzeuge ich zuvor

bspw:
Code: 
canvas1 = document.createElement('canvas');
canvas2 = document.createElement('canvas');

//#########################
//bild zwei erzeugen
canvas2.width = crop_img_width;
            canvas2.height = crop_img_height;
            
            var ctx = canvas2.getContext('2d');
            ctx.drawImage( video, start_x, start_y, canvas2.width, canvas2.height, 0, 0 , canvas2.width, canvas2.height );


nun habe ich ein bild im canvas2

wenn ich später die function:
Code: 
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

aufrufe, kann ich dann statt img1.data dort direkt das canvas eintragen?

Code: 
pixelmatch(canvas1, canvas2, diff.data, width, height, {threshold: 0.1});

oder muss ich von den zuvor erstelen canvas die ein getcontext erstellen?
Code: 
var canvas1_ctx = canvas1.getContext("2d");
var canvas2_ctx = canvas2.getContext("2d");

pixelmatch(canvas1_ctx, canvas2_ctx, diff.data, width, height, {threshold: 0.1});

oder kann ich es direkt mit:
Code: 
pixelmatch(canvas1.data, canvas2.data, diff.data, width, height, {threshold: 0.1});
 
ich weiß mittlerweile, dass ich die getimagedata vom canvas brauche. aber irgendwie schaffe ich es nicht. hier mein code
Code: 
//canvas vergleichen
    diff = document.createElement('canvas');
    diffContext = diff.getContext("2d");
    diff_data = diffContext.createImageData(crop_img_width, crop_img_height);

    
    var ctx_canvas1 = canvas1.getContext("2d");
    canvas1_img_data  = ctx_canvas1.getImageData(0,0,crop_img_width, crop_img_height);
    
    var ctx_canvas2 = canvas2.getContext("2d");
    canvas2_img_data  = ctx_canvas2.getImageData(0,0,crop_img_width, crop_img_height);
    

                
    pixelmatch(canvas1_img_data, canvas2_img_data, diff_data.data, crop_img_width, crop_img_height, {threshold: 0.1});
    
    diffContext.putImageData(diff_data, 0, 0);

leider erhalte ich diese Fehlermeldung:
Code: 
throw new Error('Image data: Uint8Array, Uint8ClampedArray or Buffer expected.');
 
Wie in der Dokumentation zu sehen musst der Funktionsaufruf so aussehen:
Javascript: 
pixelmatch(canvas1_img_data.data, canvas2_img_data.data, ...)
(Du musst nochmal mit .data die Uint8ClampedArray Präsentation des Bildes abrufen)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben