pixelmatch in browser nutzen?
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
1 Antwort
(...) wird keine datei gefunden, der pfad existiert nicht (...)
Das Problem wurde bei packd bereits auf die Issue-Liste gesetzt:
https://github.com/Rich-Harris/packd/issues/165
Du kannst dort nochmals nach dem Status nachhaken, um es vielleicht zu pushen oder du fragst stattdessen beim Entwickler der pixelmatch-Bibliothek nach Support.
(...) wenn ich das letzte release runterlade und einbinde (...)
Die Ressource, die du versuchst zu verwenden, benötigt Node.js. Nimm stattdessen die index.js.
Wenn du die Bibliothek nicht als Modul einbinden möchtest, entferne die dritte Zeile.
Danke dir. Beispiele habe ich mir angesehen, aber ich schaffe es noch nicht....
Die canvas sind ja nur mit javascript erstellt. es gibt sie nicht physiosch im Html DOM....
mein code sieht so aus:
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.');
Die canvas-Elemente kannst du im body anlegen und via DOM-API holen.
Beispiel:
<canvas id="my-canvas"></canvas>
<script>
const myCanvas = document.getElementById("my-canvas");
/* ... */
</script>
Den Fehler erhältst du, da du anders als im GitHub-Beispiel das gesamte ImageData-Objekt (canvas1_img_data), anstatt einem Byte-Array (canvas1_img_data.data) übergibst.
wauw super danke!!!!!!!
kann ich dann statt img1.data dort direkt das canvas eintragen?
Code:
oder muss ich von den zuvor erstelen canvas die ein getcontext erstellen?
Code:
oder kann ich es direkt mit:
Code: