将 canvas 集成到 jsdom

Question

查看js的文档dom，好像支持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-prebuilt 安装了 npm 并在 jsdom[=20 之前导入了 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

我将我的编辑复制到 post 作为我问题的答案：

所以在深入研究 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 还有其他几个问题，由于它们超出了这个问题的范围，因此这里不再进一步讨论。

希望这个问题对某些人有所帮助。

将 canvas 集成到 jsdom

Integrating canvas into jsdom

canvas

express

jsdom

html2canvas

因此我的问题是如何将canvas集成到jsdom中？