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

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

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

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

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

    Как оказалось, 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 undefined.

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

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