0

在我的项目中，我需要将 ReactQuill 的视图导出为图像。它应该尽可能像素完美。

该项目的后端服务器是php。

我仍然不确定该怎么做。这些是必需的步骤：

  1. 将 Quill 转换为 html
  2. 将html转换为图像
  3. 保存图片。

对于#1，我尝试在服务器上使用 DBlackborough\Quill，但它的样式未正确呈现。目前我在浏览器上使用 quill-delta-to-html

对于#2，在服务器上我尝试了 Spatie\Browsershot，它需要在服务器上安装 chrome，这可能会导致问题。所以目前我正在处理 html2canvas 和 dom-to-image，但两者都不能正确呈现样式。

例如，这个 Quill：

{"ops":[{"insert":"est"},{"attributes":{"align":"center"},"insert":"\n\n"},{"insert":"fdgdfgd"},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"dfg"},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"d"},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"gdf"},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"gd"},{"attributes":{"align":"center"},"insert":"\n"}]}

使用此代码：

    let deltaOps  = editor_ref.current.getEditor().getContents();
    let content_str = JSON.stringify(deltaOps);

    let cfg = {
      inlineStyles: true
    };
    let converter = new QuillDeltaToHtmlConverter(deltaOps.ops, cfg);
    let html = converter.convert();

转换为以下html：

<div id="my_template">
<p style="text-align:center">est</p>
<p style="text-align:center"><br></p>
<p style="text-align:center">fdgdfgd</p>
<p style="text-align:center">dfg</p>
<p style="text-align:center">d</p>
<p style="text-align:center">gdf</p>
<p style="text-align:center">gd</p>
</div>

这对我来说看起来不错。但是在渲染时，所有的文本对齐都被忽略了：

文本对齐中心被忽略

这是使用的 html 到画布。dom-to-image 有类似的结果。

let printdiv = document.createElement("div");
printdiv.innerHTML = `<div id='ticket_template'>${res.html}</div>`;
document.body.appendChild(printdiv);

html2canvas(document.getElementById("ticket_template"),{
    width: 520,
})
.then((canvas) => {
   let imgData = canvas.toDataURL('image/png');
});

更新

我对 Browsershot 的问题是这个错误：

[2021-12-08 15:00:07] local.ERROR: Uncaught Symfony\Component\Process\Exception\ProcessFailedException: The command "PATH=$PATH:/usr/local/bin:/opt/homebrew/bin NODE_PATH=`npm root -g` node '/var/www/html/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"file:\/\/\/tmp\/1529719988-0318315001638975179\/index.html","action":"screenshot","options":{"type":"png","path":"\/var\/www\/html\/storage\/app\/temp.png","args":["--no-sandbox"],"viewport":{"width":800,"height":600},"displayHeaderFooter":false}}'" failed.

Exit Code: 127(Command not found)

Working directory: /var/www/html/public

Output:
================


Error Output:
================
sh: 1: npm: not found
sh: 1: node: not found

Stack trace:
#0 /var/www/html/vendor/spatie/browsershot/src/Browsershot.php(533): Spatie\\Browsershot\\Browsershot->callBrowser(Array)

这个问题是因为服务器作为 www-data 运行，而 node 只为 root 用户安装

我检查了一下，Browsershot 生成的图像样式正确。但是，我仍然很想知道我是否可以在客户端进行转换。

4

0 回答 0