Обработка изображений холста в Firebase Functions

Question

Я пытаюсь скопировать некоторый код на стороне клиента, используя функции firebase.По сути, я просто пытаюсь взять изображение пользователя, создать его круглую версию с цветом вокруг него.

Вот код, который я сейчас использую, который работает на стороне клиента, ноне в Firebase Functions.

export async function createCanvasImage(userImage) {
console.log('createCanvasImage started...');

const canvas = new Canvas(60, 60);
const context = canvas.getContext('2d');

// Creates the blue user image.
async function blueCanvas() {
return new Promise((resolve, reject) => {
  context.strokeStyle = '#488aff';

  context.beginPath();
  context.arc(30, 30, 28, 0, 2 * Math.PI);
  context.imageSmoothingEnabled = false;

  context.lineWidth = 3;
  context.stroke();

  context.imageSmoothingEnabled = false;
  console.log('Canvas Image loaded!');
  context.save();
  context.beginPath();
  context.arc(30, 30, 28, 0, Math.PI * 2, true);
  context.closePath();
  context.clip();
  context.drawImage(userImage, 0, 0, 60, 60);

  context.beginPath();
  context.arc(0, 0, 28, 0, Math.PI * 2, true);
  context.clip();
  context.closePath();
  context.restore();
  const dataURL = canvas.toDataURL();
  console.log(dataURL);
  resolve(dataURL);
  });

}

Но, к сожалению, возвращается следующая ошибка:

Ошибка создания одного из изображений холста ..TypeError: Ожидается изображение или холст

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

Я пытался использовать некоторый код, предоставленный в примерах функции firebase:

 return mkdirp(tempLocalDir)
.then(() => {
// Download file from bucket.
return bucket.file(filePath)
.download({ destination: tempLocalFile });
})
.then(() => {
console.log('The file has been downloaded to', tempLocalFile);
createCanvasImage(tempLocalFile)
.catch(err => {console.log(err); });
})
.catch(err => { console.log(err); });

Answer 1

Если вы не пропустили DOM, как предложили Lex , я нашел эту и эту запись, где проблема была в версии node-canvas.

Я вижу Canvas только в одном модуле, но если вы используете больше, прочитайте объяснение ниже, которое я нашел здесь :

Не могу найти другую проблемуэто обсуждает это больше, но нет способа исправить это в самом node-canvas, потому что это ограничение нативных аддонов (две разные сборки node-canvas не создают совместимые объекты).На каком-то уровне ваш JS-код должен убедиться, что он везде использует один и тот же node-canvas.Не зная ничего о вашем приложении, это может означать использование npm v3 или более поздней версии, которая имеет плоский (ter) каталог node_modules;обеспечение того, чтобы все, что зависит от node-canvas, могло использовать одну и ту же версию;и / или предоставление центральной оболочки для node-canvas, которая вам требуется, вместо того, чтобы напрямую запрашивать node-canvas.Надеемся, что первые два должны просто работать и не требовать изменения кода, но могут быть хрупкими.

Answer 2

Я думаю, что вам не хватает DOM, если вы не импортируете библиотеки, которые здесь не показаны.Это та же самая причина, по которой у Nodejs нет объекта window или document.Здесь есть хорошие вопросы и ответы Почему node.js не имеет собственного DOM?

Существует реализация холста узла node-canvas , которая может быть включена в вашпакет.