nodejs - Jak dodać dane obrazu z pliku na płótno

Poniższy kod powinien odczytać plik obrazu, a następnie dodać dane pliku do płótna za pomocą modułu Canvas.nodejs - Jak dodać dane obrazu z pliku na płótno

Po uruchomieniu tego kodu otrzymuję komunikat o błędzie Obraz nie jest zdefiniowany. Czy obiekt obrazu, który próbuję zainicjować z modułu, który po prostu zaimportuję?

var http = require('http'), fs = require('fs'), 
Canvas = require('canvas'); 

http.createServer(function (req, res) { 
    fs.readFile(__dirname + '/image.jpg', function(err, data) { 
     if (err) throw err; 
     img = new Image(); 
     img.src = data; 
     ctx.drawImage(img, 0, 0, img.width/4, img.height/4); 

     res.write('<html><body>'); 
     res.write('<img src="' + canvas.toDataURL() + '" />'); 
     res.write('</body></html>'); 
     res.end(); 
    }); 

}).listen(8124, "127.0.0.1"); 
console.log('Server running at http://127.0.0.1:8124/');

Źródło

2012-03-03 mesh

przepraszam jeśli się mylę, ale to wygląda na to, że znalazłeś ten kod gdzieś i starał się go używać bez faktycznego zrozumienia tego, co dzieje się pod kołdrą. Nawet jeśli miałbyś naprawić błąd Nie zdefiniowano obrazu, jest wiele innych.

Mam ustalony kod na końcu tego postu, ale polecam głębiej myśleć o tych sprawach w kodzie z pytaniem:

Co jest Image? Skąd to pochodzi? Zaimportowałeś: http, fs i Canvas, więc te rzeczy są oczywiście zdefiniowane. Jednakże, Image hase nie został zdefiniowany nigdzie i nie jest wbudowany.

Okazuje się, że Image pochodzi z modułu canvas-node, który został zaimportowany za pomocą Canvas = require('canvas'). Oznacza to, że Image jest dostępny jako Canvas.Image.

Ważne jest, aby zrozumieć, że dzieje się tak z powodu importu, który skonfigurowałeś. Po prostu mogłeś łatwo wykonać abc = require('canvas'), a następnie Image byłby dostępny jako abc.Image.
Co to jest ctx? Skąd to pochodzi?

To kolejna zmienna, która nie została nigdzie zdefiniowana. W przeciwieństwie do Image, nie jest dostępny jako Canvas.ctx. Jest to po prostu losowa nazwa zmiennej, która w tym momencie niczego nie odpowiada, więc próba wywołania drawImage spowoduje zgłoszenie wyjątku.
Co z canvas (małe litery)? Co to jest?

Używasz canvas.toDataURL, ale nie ma żadnej zmiennej o nazwie canvas w dowolnym miejscu. Czego oczekujesz od tego fragmentu kodu? Teraz po prostu rzuci wyjątek, że płótno jest niezdefiniowane.

Polecam dokładniej zapoznać się z dokumentacją i dokładniej przyjrzeć się przykładowemu kodowi, który zostanie skopiowany do własnych aplikacji w przyszłości.

Oto poprawiony kod, z kilkoma komentarzami wyjaśniającymi moje zmiany. Pomyślałem o tym, rzucając okiem na dokumentację pod numerem https://github.com/learnboost/node-canvas.

var http = require('http'), fs = require('fs'), 
Canvas = require('canvas'); 

http.createServer(function (req, res) { 
    fs.readFile(__dirname + '/image.jpg', function(err, data) { 
     if (err) throw err; 
     var img = new Canvas.Image; // Create a new Image 
     img.src = data; 

     // Initialiaze a new Canvas with the same dimensions 
     // as the image, and get a 2D drawing context for it. 
     var canvas = new Canvas(img.width, img.height); 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(img, 0, 0, img.width/4, img.height/4); 

     res.write('<html><body>'); 
     res.write('<img src="' + canvas.toDataURL() + '" />'); 
     res.write('</body></html>'); 
     res.end(); 
    }); 

}).listen(8124, "127.0.0.1"); 
console.log('Server running at http://127.0.0.1:8124/');

Źródło

2012-03-03 17:50:09

Dzięki Rohan.Zapomniałem o definiowaniu zmiennych ctx i canvas, ale nigdy nie zauważyłem, ponieważ nie udało mi się jeszcze dostać tych błędów. Ten link podałeś tam, skąd wziąłem przykład, ponieważ pokazany na tej stronie autor użył ** nowego obrazu ** zamiast ** Canvas.Image **. – mesh

Tak, leniwa dokumentacja tam. Samo użycie 'Image' w kontekście kodu samego modułu węzła-płótna działałoby, ponieważ definiuje' Image = canvas.Image' w swoim źródle (lib/canvas.js). Jednak nie będzie działać we własnym kodzie, chyba że zdefiniujesz tę samą definicję. –

Szkoda, ale ta biedna dokumentacja wciąż istnieje. Jak możemy walnąć w tyłek, żeby to naprawić? – Dan

nodejs - Jak dodać dane obrazu z pliku na płótno

Odpowiedz

Powiązane problemy