微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

(JSDOM) 无法读取 null 的属性“ownerDocument”

如何解决(JSDOM) 无法读取 null 的属性“ownerDocument”

(node:12531) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'ownerDocument' of null
    at /home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:6946:45
    at step (/home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:83:27)
    at Object.next (/home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:64:57)
    at /home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:57:75
    at new Promise (<anonymous>)
    at __awaiter (/home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:53:16)
    at renderElement (/home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:6941:59)
    at Object.html2canvas [as default] (/home/decave27/dev/datacontent-server/node_modules/html2canvas/dist/html2canvas.js:6936:16)
    at Object.<anonymous> (/home/decave27/dev/datacontent-server/src/test.js:20:22)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
(node:12531) 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: 2)
(node:12531) [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.

在我的代码

import html2canvas from 'html2canvas';
import canvas from 'canvas';
import jsdom from 'jsdom';
const { JSDOM } = jsdom;

let html = `<html><head> <style>.main-container{width: 900px;}.header{position: relative; height: 300px; border-radius: 30px 30px 0 0; background-image: url("https://cdn.discordapp.com/banners/702656580600201296/a_27824df165e2565c043d40fb3c18cda9.png?size=512"); background-size: 900px 300px;}.profile{position: absolute; width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; top: 200px; left: 50px; overflow: hidden;}.content{background: #23272a; height: 250px; border-radius: 0 0 30px 30px; overflow: hidden;}.text{color: white; position: absolute; top: 420px; left: 50px;}#username{font-weight: bold; font-size: 40px;}#tag{font-weight: bold; font-size: 35px; color: #b9bbbe;}#con{font-size: 25px;}</style></head><body> <div class="main-container"> <div class="header"></div><div class="profile"> <img width="200px" height="200px" src="https://cdn.discordapp.com/icons/197038439483310086/a_052fbf7876b946106d9277b06e8210ab.webp?size=128"> </div><div class="content"> <div class="text"> <span id=username>user</span><span id="tag">name</span> <br><span id="con">hello</span> </div></div></div></body></html>`

const biodom = new JSDOM(html,{runScripts: "dangerously",pretendToBeVisual: true});
// @ts-ignore
global.window   = biodom.window;
global.document = biodom.window.document;
global.Image    = window.Image;
global.Node     = window.Node;
// @ts-ignore
let card: HTMLElement = biodom.window.document.querySelector("#card")
// @ts-ignore
html2canvas(card,{backgroundColor: null,removeContainer: true,letterRendering: 1,allowTaint : true,useCORS: true}).then(canvas => {
    console.log(canvas.toDataURL("image/png"));
})

我该如何解决这个问题? 或者是否有一个 html 来捕获在 jsdom 中工作的模块?

Nodejs 版本:v10.19.0

打字稿版本:4.3.5

html2canvas 版本:1.0.0-rc.7

jsdom 版本:16.6.0

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。