时间戳

首页 > 解决方案 > 在 JavaScript 或 PHP 中修剪 SVG

javascript - 在 JavaScript 或 PHP 中修剪 SVG

问题描述

我最近试用了 JS-Library signature_pad，你可以在这里尝试一下，并且对它的效果感到非常惊讶。

现在，当我想将它实施到一个小项目中时，我发现了一个我不喜欢的错误行为：

它始终导出整个 Canvas，而不仅仅是内容。对我来说，我想导出一个签名，所以我在 pad 上签名并只想拥有签名。

现在，如果我将其导出为 PNG/JPG（光栅图形），我确实可以使用 JavaScript 或 PHP（Imagemagick）对其进行修剪，但我希望签名为 SVG。

显然，signature_pad 允许将绘图导出为 SVG，但同样还有所有未使用的空间，包括。

所以我的计划是：

  1. 将其导出为 SVG
  2. 在客户端（Javscript）或服务器端（PHP）导出后修剪它

但为此，我需要一种修剪 SVG 的方法。

我将在此线程上附加一个示例 SVG，以确保每个人都能理解我想要修剪的确切内容。

还有一件事：SVG 将以 base64 编码导出，但我希望我能找到一种方法将其导出为文本。

显然我可以在这里附加 PNG，但我也会提供 SVG 的源代码。 SVG

开始于<svg viewBox="0 0 664 373" width="664" height="373"

我希望它看起来像这样：

SVG 修剪

开始于<svg viewBox="70 87.5 367 197" height="197" width="367"

因此，只需更改视图框、宽度和高度就足够了。但我不知道如何确定 SVG 内容所触及的最左、最右、最底、最高点。

有人知道该怎么做吗？

标签： javascriptphpsvgsignaturesignaturepad

解决方案

推荐阅读