ERLEDIGT: Jimp.read is not a function

[uwe72]

@oliverio said in TypeError: Jimp.read is not a function:

@uwe72

Hier eine Alternative mit Doku
https://www.npmjs.com/package/sharp

Danke dir! Werde schauen, ob ich es vollends so hinkriege. Falls nicht, versuche ich es mit sharp. Danke und Grüße!

[fastfoot]

@uwe72 Also wenn es nur die anfangs geposteten Funktionen sind die du brauchst dann geht das so:

const Jimp = require("jimp").Jimp;

Jimp.read("./Astro.jpg").then(image => {
  // console.log(image);
  image
    .resize({ h: 256, w: 256 })
    .greyscale()
    .write("./Astro2.jpg", { quality: 60 });
});

Da ändert sich ständig was, bestimmt kommt auch bald ne Doku. Das hier habe ich dem Source entnommen

[uwe72]

@fastfoot Funktioniert prima!

Ich benötige "scan" für das Zeichnen von Linien und "print" für das Schreiben von Text. Das kriege ich auf Anhieb nicht hin. Ich versuche nun auch mal den Sourcecode zu finden.

[fastfoot]

@uwe72
das geht so:

const { Jimp, loadFont } = require("jimp");
const { SANS_32_BLACK } = require("jimp/fonts");

async function test() {
  const image = await new Jimp({ width: 192, height: 128, color: "00ff00ff" });
  const font = await loadFont(SANS_32_BLACK);
  image
    .print({ font, x: 0, y: 10, text: "Hello World" })
    .scan(0, 64, image.bitmap.width, image.bitmap.height, (x, y, idx) => {
      if (x < y) {
        image.bitmap.data[idx + 0] = 255;
        image.bitmap.data[idx + 1] = 255;
        image.bitmap.data[idx + 2] = 255;
        image.bitmap.data[idx + 3] = 255;
      }
    })
    .write("./Astro2.png", { quality: 60 });
}

await test();

[uwe72]

@fastfoot DANKESCHÖN!!!

javascript.1
2024-09-09 10:29:54.883	error	at processImmediate (node:internal/timers:485:21)
javascript.1
2024-09-09 10:29:54.883	error	at Immediate._onImmediate (/opt/iobroker/node_modules/iobroker.javascript/main.js:1732:17)
javascript.1
2024-09-09 10:29:54.883	error	at /opt/iobroker/node_modules/iobroker.javascript/main.js:2320:17
javascript.1
2024-09-09 10:29:54.883	error	at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:2222:37)
javascript.1
2024-09-09 10:29:54.883	error	at createVM (/opt/iobroker/node_modules/iobroker.javascript/main.js:1954:21)
javascript.1
2024-09-09 10:29:54.883	error	at new Script (node:vm:116:7)
javascript.1
2024-09-09 10:29:54.883	error	SyntaxError: Cannot use import statement outside a module
javascript.1
2024-09-09 10:29:54.883	error	^^^^^^
javascript.1
2024-09-09 10:29:54.883	error	import { Jimp, loadFont } from "jimp";
javascript.1
2024-09-09 10:29:54.883	error	script.js.common.Automatisierungen.KI_Detection.TEST_JIMP compile failed: at script.js.common.Automatisierungen.KI_Detection.TEST_JIMP:38

Ich kriege es leider noch nicht wirklich hin. Im IoBroker-Script funktioniert dies denke ich nicht mit dem import. Brauche man da das request?

So fit bin ich leider nicht. Danke dir für deine Zeit. Bin dafür sehr dankbar!

Hintergrund: Ich sende einem AI-Server alle x ms ein Bild von der IP-Kamera. Der AI-Server sendet dann die Info zurück, ob ein Gesicht erkannt wurde und falls ja, welches. Es kommen auch die Koordinaten zurück vom Gesicht. Auf dem Originalbild zeichne ich dann eben über "Jimp" ein Rechteck um das Gesicht und schreibe noch den erkannten Namen dazu und die Prozentzahl. Dieses Bild verarbeite ich dann weiter....Versand nach Telegram....

Zum Beispiel:

[fastfoot]

@uwe72 sorry, das kommt davon wenn man nicht unter iobroker entwickelt. Nimm statt import request, iobroker unterstützt ersteres wohl noch nicht

EDIT: Ich habe das Beispiel entsprechend angepasst

[uwe72]

@fastfoot DANKE dir!!

Habe dein Beispiel mal angepasst, so dass ich auf einem bestehendem Bild aufsetze und zeichne auf die Schnelle mal einen Text und eine Grafik (scan).

Beim scan ist mir noch nicht ganz klar, wie das konfiguriert wird um ein Rechteck zu erhalten. Auch ist mir nicht klar was die 4 Zeilen machen (z.B. image.bitmap.data[idx + 0] = 255;)

const { Jimp, loadFont } = require("jimp");
const { SANS_32_WHITE } = require("jimp/fonts");

const baseDirectory = "/opt/iobroker/";
var filename = baseDirectory + "/detection.jpg";
var filenameBoundingBox = baseDirectory + "_detection_plate_boundingbox_UWE.jpg";
 
async function test() {
  const font = await loadFont(SANS_32_WHITE);
  Jimp.read(filename).then(image => {
    image
      .print({ font, x: 200, y: 50, text: "DANKESCHÖN!" })
      .scan(/*x*/ 200, /*y*/ 100, /*width*/ 1000, /*height*/ 3300, (x, y, idx) => {
        if (x < y) {
            image.bitmap.data[idx + 0] = 255;
            image.bitmap.data[idx + 1] = 255;
            image.bitmap.data[idx + 2] = 255;
            image.bitmap.data[idx + 3] = 255;
        }
      })
      .write(filenameBoundingBox, { quality: 100 });
  });      
}
 
await test();

[fastfoot]

@uwe72 ich hatte da auf dich gehofft, zeig doch mal den bisherigen code. Mit meinem sehr beschränkten Wissen stelle ich mir das schwer vor, wenn auch nicht unmöglich. Was ich bräuchte wären die Koordinaten des Gesichts und was du dann in der scan() Funktion stehen hattest. Das Beispiel hab ich aus der Doku(ältere Versionen haben die noch)

[uwe72]

@fastfoot Nein, brauchst Du dir nicht anschauen, wenn Du hier auch nicht fit bist. Ich werde mir das in Ruhe anschauen im Laufe der Woche. Das kriege ich schon vollends hin. Wichtigste war dein Input, dass es prinzipiell funktioniert, war eine große Hilfe für mich, danke hierfür!

[uwe72]

@fastfoot Habs nun umgebaut. DANKE nochmals für deinen Input!

const fillCrimson = makeIteratorThatFillsWithColor(0xED143DFF);
 
async function appendBoundingBox(response, inputFileName, outputFileName) {
  const font = await loadFont(SANS_32_WHITE);
  Jimp.read(inputFileName).then(image => {
    var imageJimp = image.print({ font, x: 50, y: 50, text: "Nummernschilderkennung" });

        response.data.predictions.forEach(function (prediction) {
            if (prediction.confidence > (minimumConfidencePercent/100)) {

                // Prozentzahl als Text:
                imageJimp.scan(prediction.x_min, prediction.y_max+5, 75, 40, makeIteratorThatFillsWithColor(0x00000040));
                imageJimp.print({ font, x: prediction.x_min+7, y: prediction.y_max+8, text: (prediction.confidence*100).toFixed(0)+"%" });

                // Waagrecht; x1, y1, Länge Strich, Strichbreite (obere waagreche Linie):
                imageJimp.scan(prediction.x_min, prediction.y_min, (prediction.x_max-prediction.x_min), 3, fillCrimson); 

                // Waagrecht; x1, y1, Länge Strich, Strichbreite (untere waagreche Linie):
                imageJimp.scan(prediction.x_min, prediction.y_max, (prediction.x_max-prediction.x_min), 3, fillCrimson); 

                // Senkrecht; x1, y1, Strichbreite, Länge Strich (linke sekrechte Linie)
                imageJimp.scan(prediction.x_min, prediction.y_min, 3, (prediction.y_max-prediction.y_min), fillCrimson); 

                // Senkrecht; x1, y1, Strichbreite, Länge Strich (rechte sekrechte Linie)
                imageJimp.scan(prediction.x_max, prediction.y_min, 3, (prediction.y_max-prediction.y_min), fillCrimson); 
            }
        }); 
        log("Output: " + outputFileName);
      imageJimp.write(outputFileName, { quality: 100 });
  });      
}

function makeIteratorThatFillsWithColor(color) {
    return function (x, y, offset) {
        this.bitmap.data.writeUInt32BE(color, offset, true);
    }
};