nodejs - Как добавить данные изображения из файла на холст - PullRequest
Новая
       18

nodejs - Как добавить данные изображения из файла на холст

13 голосов
/ 03 марта 2012

Следующий код должен прочитать файл изображения и затем добавить данные файла в холст с помощью модуля 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;
        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/');

1 Ответ

38 голосов
/ 03 марта 2012

Я прошу прощения, если я ошибаюсь, но похоже, что вы где-то нашли этот код и попытались использовать его, фактически не понимая, что происходит под прикрытием.Даже если бы вы исправили ошибку Изображение не определено , есть много других.

У меня есть фиксированный код в конце этого поста, но я бы порекомендовал подумать более глубокоОб этих проблемах в коде из вашего вопроса:

  • Что такое Image?Откуда это взялось?Вы импортировали http, fs и Canvas, поэтому эти вещи явно определены.Однако Image не был определен где-либо и не является встроенным.

    Как оказалось, Image из модуля node-canvas, который вы импортировали с помощьюCanvas = require('canvas').Это означает, что Image доступен как Canvas.Image.

    Важно понимать, что это связано с настройками импорта, которые вы настроили.Вы могли бы просто сделать abc = require('canvas'), и тогда Image будет доступно как abc.Image.

  • Что такое ctx?Откуда это происходит?

    Опять же, это еще одна переменная, которая нигде не была определена.В отличие от Image, он недоступен как Canvas.ctx.Это просто случайное имя переменной, которое на данный момент ни к чему не относится, поэтому попытка вызвать drawImage для него вызовет исключение.

  • Как насчетcanvas (строчные буквы)?Что это?

    Вы используете canvas.toDataURL, но нигде нет переменной с именем canvas.Что вы ожидаете от этого куска кода?Прямо сейчас это просто вызовет исключение о том, что canvas не определен.

Я бы рекомендовал читать документацию более внимательно и более внимательно смотреть на любой пример кода, который вы копируете в свои собственные приложениябудущее.

Вот исправленный код с некоторыми комментариями, объясняющими мои изменения.Я понял это, бросив быстрый взгляд на документацию на 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/');
...