-
引用 5楼我正在开发一个 Node.js 项目，该项目使用 node-html-to-image 库渲染包含多种语言和字体文本的视频。在我的本地 Windows 机器上一切都运行正常，但当我
我正在开发一个 Node.js 项目，该项目使用该
node-html-to-image库渲染带有多种语言和字体的文本的视频。在我的本地 Windows 机器上一切都运行良好，但是当我将项目部署到 Ubuntu EC2 服务器时，非英语文本（如中文和普通话）无法渲染并在视频中显示为空白文本。该项目是关于视频编辑的，在该项目中，用户将能够向视频添加文本，问题在于文本渲染，当我选择非英语文本时，它会显示在前端，但因此前端只负责发送视频数据，其余的将由部署在 AWS ubuntu EC2 机器上的 node.js 脚本处理，视频编辑逻辑将由此 node.js 脚本处理。const textToImage = (layer) => { return new Promise((resolve, reject) => { try { const textWidth = layer.size.width * multiplyNum const textHeight = layer.size.height * multiplyNum const textLeft = layer.position.left * multiplyNum const textTop = layer.position.top * multiplyNum const TextfontSize = parseInt(layer.style.fontSize) * multiplyNum let html = layer.src; if (layer.textToHighlight !== null && layer.textToHighlight !== undefined) { layer.textToHighlight.forEach((curElem) => { html = html.replaceAll(curElem.text, `<span style="color:${curElem.color}; background:${curElem.background};">${curElem.text}</span>`); }) } if (layer.innerCss != null && layer.innerCss != undefined) { html = `<span class="spanStyle" style="display: ${layer.innerCss.display};line-height: ${layer.innerCss.lineHeight}; padding: ${(layer.innerCss.padding)}; background: ${layer.innerCss.background}; -webkit-box-decoration-break: clone; box-decoration-break: clone;">${html}</span>` } else { html = `<span class="spanStyle">${html}</span>` } nodeHtmlToImage({ output: rootDir + textCount + 'image.png', transparent: true, timeout: 60000, html: `<html> <head> <meta charset="UTF-8"> <script src ="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> <script> WebFont.load({ google: { families: ['${layer.style.fontFamily}'] } }); </script> <style> *{ box-sizing: border-box; margin: 0; padding:0; } body { width: ${mainWidth}px; height:${mainHeight}px; } .mystyle{ background: ${layer.style.background}; opacity: ${layer.style.opacity}; border:${layer.style.border}; box-shadow: ${layer.style.boxShadow}; object-fit:${layer.style.objectFit}; position: absolute; left: ${textLeft}px; top: ${textTop}px; width: ${textWidth}; height: ${textHeight}px; text-align: ${layer.style.textAlign}; } .spanStyle{ color: ${layer.style.color}; font-size: ${TextfontSize}; font-family: ${layer.style.fontFamily}; font-weight:${layer.style.fontWeight}; text-transform: ${layer.style.textTransform}; text-decoration: ${layer.style.textDecoration}; font-family: ${layer.style.fontFamily}; font-style: ${layer.style.fontStyle}; line-height: ${layer.style.lineHeight}; } </style> </head> <body> <div class="mystyle"> ${html} </div> </body> </html>`, }).then(() => { resolve(rootDir + textCount + 'image.png'); console.log(textCount + "text created successfully") }) .catch((err) => { resolve(""); console.error(err, "text failed to create"); }) } catch (error) { resolve(""); console.log("text failed to create") } }) }采取的步骤：
在 Ubuntu 服务器上安装了必要的语言包。验证了与 Google Fonts 的网络连接。确保服务器上安装了 Puppeteer 依赖项。添加日志记录以检查字体是否正确加载。
观察到的行为：
在本地 Windows 环境中，所有语言均能正确呈现。在 Ubuntu EC2 服务器上，非英语文本显示为空白。
这是来自 EC2 服务器的渲染视频
这是前端：
是什么原因导致非英语文本无法在 Ubuntu EC2 服务器上呈现，我该如何解决这个问题？请回答，因为我已经进行了很多研究，这个问题在本地环境中无法解决，应该在生产中进行更改。我希望视频能够以所有非英语语言（如中文和普通话）正确呈现