TCPDF 在使用图像数据 uri 传递 SVG 时产生错误

Question

我在前端使用 FabricJS 来设计花押字，并裁剪上传到 canvas 的图像以适合设计。 Fabric 在生成 SVG 时使用源图像，所以我将图像源更新为数据 uri 并在最终调用 toSVG()

之前渲染 canvas

以上有效，需要调整，但正在生成 SVG，看起来不错。

现在，当我们将 SVG 数据传递给 TCPDF 时，TCPDF 会抛出错误并构建不完整的 PDF。除嵌入图像外的所有内容均已正确绘制。然而，图像部分只是一个白色方块。

是什么导致 TCPDF 无法解析 data-uri 图像？

Warning: Illegal string offset 'masked' in /home/xxx/includes/tcpdf/tcpdf.php on line 7145

Warning: Illegal string offset 'altimgs' in /home/xxx/includes/tcpdf/tcpdf.php on line 7151

Warning: Illegal string offset 'i' in /home/xxx/includes/tcpdf/tcpdf.php on line 20877

Warning: Illegal string offset 'i' in /home/xxx/includes/tcpdf/tcpdf.php on line 20890

Warning: Illegal string offset 'i' in /home/xxx/includes/tcpdf/tcpdf.php on line 7153

Warning: Illegal string offset 'i' in /home/xxx/includes/tcpdf/tcpdf.php on line 7188

Warning: Illegal string offset 'i' in /home/xxx/includes/tcpdf/tcpdf.php on line 7235

Link 到 SVG 数据：http://pastebin.com/SqjYT89Q

Answer 1

我认为这个问题是由 FabricJS 中的错误引起的。您使用 FabricJS 生成的 SVG 文件在 path 标签的 stroke 属性中使用了 stroke-dasharray 参数的许多实例，但它没有包含任何选项规范，即，根据 SVG 规范，错误：

http://www.w3.org/TR/SVG/painting.html#StrokeProperties

该文件包含许多如下所示的实例：

style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt;...

但实际上应该是这样的：

style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt;...

注意在stroke-dasharray之后添加none选项。

为了验证这个理论，我做了一个简单的搜索并替换了您提供的 SVG 文件，添加了 none 选项，一旦我这样做了，我就是能够使用 Imagick 成功地将您的 SVG 文件转换为 JPG（得到带有 URL 的紫色椭圆和美丽的狗的图片。:-)。基于该结果，如果 SVG 文件中的这个问题得到解决，我非常有信心 TCPDF 错误将会消失。

此问题的正确解决方案是在 GitHub 上的 FabricJS 项目中提出问题，如果您的 JavaScript 技能达到要求，您可能可以修复并提交拉取请求。

与此同时，您可以通过运行通过 str_replace() 函数传入的 SVG 文件来解决此问题，将之前 stroke-dasharray: ; 的所有实例替换为 stroke-dasharray: none;您将 SVG 数据传递给 TCPDF，这应该可以解决您的问题。

TCPDF 在使用图像数据 uri 传递 SVG 时产生错误

TCPDF producing errors when passing SVG using data uri for images

php

svg

tcpdf

data-uri

fabricjs