nodejs - Cách thêm dữ liệu hình ảnh từ tập tin vào canvas

Đoạn mã sau được cho là để đọc một tập tin hình ảnh và sau đó thêm dữ liệu tập tin vào một canvas với sự trợ giúp của mô-đun Canvas.nodejs - Cách thêm dữ liệu hình ảnh từ tập tin vào canvas

Khi tôi chạy mã này, tôi nhận được thông báo lỗi Hình ảnh không được xác định. Đối tượng hình ảnh mà tôi đang cố gắng khởi tạo từ một mô-đun mà tôi chỉ cần nhập?

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/');

Nguồn

2012-03-03 mesh

Tôi xin lỗi nếu tôi thấy sai ở đây, nhưng có vẻ như bạn đã tìm thấy mã này ở đâu đó và cố gắng sử dụng nó mà không thực sự hiểu những gì đang diễn ra trong trang bìa. Ngay cả khi bạn sửa chữa hình ảnh Hình ảnh không được xác định là lỗi, có nhiều lỗi khác.

Tôi có mã cố định ở phần cuối của bài viết này, nhưng tôi muốn khuyên bạn nên suy nghĩ sâu hơn về những vấn đề trong mã từ câu hỏi của bạn:

là gì Image? Nó đến từ đâu? Bạn đã nhập http, fs và Canvas, vì vậy những thứ đó rõ ràng được xác định. Tuy nhiên, Image hase không được xác định bất cứ nơi nào và nó không phải là một built-in.

Khi nó quay ra, Image là từ mô-đun nút-vải mà bạn đã nhập với Canvas = require('canvas'). Điều này có nghĩa là Image có sẵn dưới dạng Canvas.Image.

Điều quan trọng là phải hiểu rằng điều này là do nhập khẩu bạn đã thiết lập. Bạn chỉ có thể dễ dàng thực hiện abc = require('canvas') và sau đó Image sẽ có sẵn dưới dạng abc.Image.
ctx là gì? Nó đến từ đâu?

Một lần nữa, đây là một biến khác chưa được xác định ở bất kỳ đâu. Không giống như Image, nó không khả dụng dưới dạng Canvas.ctx. Nó chỉ là một tên biến ngẫu nhiên mà không tương ứng với bất cứ điều gì vào thời điểm này, vì vậy cố gắng gọi drawImage trên nó sẽ ném một ngoại lệ.
Còn khoảng canvas (chữ thường)? Đó là gì?

Bạn đang sử dụng canvas.toDataURL, nhưng không có biến nào được gọi là canvas ở bất kỳ đâu. Bạn đang mong đợi đoạn mã này để làm gì? Ngay bây giờ nó chỉ là sẽ ném một ngoại lệ nói rằng vải là không xác định.

Tôi khuyên bạn nên đọc tài liệu chặt chẽ hơn và xem xét kỹ hơn bất kỳ mã mẫu nào bạn sao chép vào ứng dụng của chính mình trong tương lai.

Đây là mã cố định, với một số nhận xét để giải thích những thay đổi của tôi. Tôi đã tìm ra điều này bằng cách xem nhanh tài liệu tại số 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/');

Nguồn

2012-03-03 17:50:09

Cảm ơn Rohan.Tôi thực sự đã quên về việc xác định các biến ctx và canvas nhưng không bao giờ nhận thấy như tôi đã không quản lý để có được những sai sót được nêu ra. Liên kết mà bạn đã cung cấp là nơi tôi đã lấy ví dụ từ như được hiển thị trên trang đó tác giả đã sử dụng ** Hình ảnh mới ** thay vì ** Canvas.Image **. – mesh

Vâng, tài liệu lười biếng ở đó. Chỉ cần sử dụng 'Hình ảnh' trong bối cảnh chính mã của mô-đun nút-canvas sẽ hoạt động, vì nó định nghĩa' Image = canvas.Image' trong nguồn của nó (lib/canvas.js). Tuy nhiên, nó sẽ không hoạt động trong mã của riêng bạn trừ khi bạn thực hiện cùng một định nghĩa. –

Thật đáng tiếc, nhưng tài liệu kém đó vẫn còn đó. Làm thế nào chúng ta có thể đấm ass của họ để sửa lỗi này? – Dan

nodejs - Cách thêm dữ liệu hình ảnh từ tập tin vào canvas

Trả lời

Các vấn đề liên quan