节点从DOM生成图像

时间:2018-10-18 12:22:47

标签: javascript node.js typescript html2canvas jsdom

我想从nodejs上的DOM元素生成图像或斑点。由于节点没有DOM可以处理,因此我要从JSDOM创建一个。我最初的计划是使用dom-to-image库,但会吐出错误:

    (node:10384) UnhandledPromiseRejectionWarning: SyntaxError: The string did not match the expected pattern.
    at XMLHttpRequest.open (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:480:15)
    at about:blank:2:5649
    at new Promise (<anonymous>)
    at j (about:blank:2:5177)
(node:10384) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:10384) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

第二个计划是通过html2canvas生成画布并将其另存为blob。通过生成以下内容也失败了:

Error: Not implemented: window.scrollTo
    at module.exports (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
    at /home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/Window.js:579:7
    at about:blank:6:156607 undefined
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:41:47)
    at A.value (about:blank:6:43814)
    at new A (about:blank:6:134500)
    at about:blank:6:63123 undefined
(node:11033) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'scale' of null
(node:11033) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:11033) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

window.scrollTo可以被覆盖,但是canvas比较棘手。有各种各样的错误,包括JSDOM中的画布

滚动修正: https://github.com/jsdom/jsdom/pull/1964

我还考虑将puppeteer用作我的虚拟DOM,因为它使用无头的chrome,但是这似乎有点过头了,而且由于运行单独的浏览器,还会产生错误。 (由于提到没有可用的沙箱的错误,我什至无法运行无头的chrome。)

我的问题是。甚至有可能在nodejs框架的服务器端从DOM生成图像吗?

项目信息:

节点版本-10.11.0
框架-nestjs最新
JSDOM-12.2.0
html2image-1.0.0-alpha.12
dom-to-image-2.6.0

0 个答案:

没有答案