express - 将 Canvas 集成到 jsdom 中

Question

查了一下jsdom的文档，好像是支持canvas的。然而给出的唯一解释是:

jsdom includes support for using the canvas or canvas-prebuilt package to extend any elements with the canvas API. To make this work, you need to include canvas as a dependency in your project, as a peer of jsdom. If jsdom can find the canvas package, it will use it, but if it's not present, then elements will behave like s.

这根本没有帮助我。我安装了 Canvas 预建 来自 npm 并在 jsdom 之前导入 canvas-prebuilt

import canvas from 'canvas-prebuilt';
import jsdom from 'jsdom';

接下来我想创建一些 html 片段的 dom 对象，然后使用 将 html 插入 Canvas 中html2canvas :

const dom = new JSDOM(html);
let domcanvas = await html2canvas(dom, {
  dpi: dpi,
  useCORS: true,
  timeout: 20000
});

执行代码时抛出一个错误说:

No canvas support

我假设 jsdom 没有找到 Canvas 。
因此我的问题是如何将 Canvas 集成到 jsdom 中？
编辑 :
所以在深入研究 JSDom 代码后，我发现 JSDom 实际上是在寻找 Canvas 。我通过修改 node_modules/jsdom/lib/jsdom/utils.js 中的代码，通过添加一些控制台日志来验证是否找到了 Canvas 来解决这个问题:

exports.Canvas = null;
["canvas", "canvas-prebuilt"].some(moduleName => {
  try {
    exports.Canvas = require(moduleName);
    if (typeof exports.Canvas !== "function") {
      console.log(moduleName+' is not a function');
      // In browserify, the require will succeed but return an empty object
      exports.Canvas = null;
    }
    console.log('Successfully found ' + moduleName);
  } catch (e) {
    console.log('Cannot find ' + moduleName);
    exports.Canvas = null;
  }
  return exports.Canvas !== null;
});

在我的情况下，输出是:

Cannot find canvas

Successfully found canvas-prebuilt

因此，我最初的问题就这样回答了。
抛出的错误来自 html2canvas，因为像 window 这样的对象, document等不是全局性的。一种解决方法是使它们成为全局性的

global.window   = dom.window;
global.document = dom.window.document;
global.Image    = window.Image;
global.Node     = window.Node;

但是，@Niklas 已经提到了 html2canvas 和 jsdom 的其他几个问题，由于它们超出了本问题的范围，因此这里不再进一步讨论。
希望这个问题无论如何对某些人有帮助。

Answer 1

我复制了我的编辑并将其发布为我的问题的答案:
所以在深入研究 JSDom 代码后，我发现 JSDom 实际上是在寻找 Canvas 。我通过修改 node_modules/jsdom/lib/jsdom/utils.js 中的代码，通过添加一些控制台日志来验证是否找到了 Canvas 来解决这个问题:

exports.Canvas = null;
["canvas", "canvas-prebuilt"].some(moduleName => {
  try {
    exports.Canvas = require(moduleName);
    if (typeof exports.Canvas !== "function") {
      console.log(moduleName+' is not a function');
      // In browserify, the require will succeed but return an empty object
      exports.Canvas = null;
    }
    console.log('Successfully found ' + moduleName);
  } catch (e) {
    console.log('Cannot find ' + moduleName);
    exports.Canvas = null;
  }
  return exports.Canvas !== null;
});

在我的情况下，输出是:

Cannot find canvas

Successfully found canvas-prebuilt

因此，我最初的问题就这样回答了。
抛出的错误来自 html2canvas，因为像 window 这样的对象, document等不是全局性的。一种解决方法是使它们成为全局性的

global.window   = dom.window;
global.document = dom.window.document;
global.Image    = window.Image;
global.Node     = window.Node;

但是，@Niklas 已经提到了 html2canvas 和 jsdom 的其他几个问题，由于它们超出了本问题的范围，因此这里不再进一步讨论。
希望这个问题无论如何对某些人有帮助。