Блог

недавно я опробовал JS-библиотеку signature_pad, вы можете попробовать ее ЗДЕСЬ, и был приятно удивлен тем, насколько хорошо она работает.

Теперь, когда я хотел реализовать это в небольшом проекте, я обнаружил ошибку, которая мне не понравилась:

Он всегда экспортирует весь холст, а не только содержимое. Для меня я хочу экспортировать подпись, поэтому я подписываю блокнот и хочу просто иметь сигнатуру.

Теперь, если я экспортирую его в формате PNG / JPG (растровая графика), я действительно могу обрезать его с помощью JavaScript или PHP (Imagemagick), но я хочу, чтобы подпись была SVG.

По-видимому, signature_pad позволяет экспортировать чертежи в формате SVG, но опять же есть все это неиспользуемое пространство, включая.

Итак, мой план таков:

1. экспортируйте его как SVG
2. обрезать его после экспорта на стороне клиента (Javscript) или на стороне сервера (PHP)

Но для этого мне действительно понадобится способ обрезки SVG.

Я добавлю пример SVG в эту тему, чтобы убедиться, что все могут понять, что именно я хотел бы убрать.

И еще одна вещь: SVG будет экспортироваться в кодировке base64, но я надеюсь, что найду способ просто экспортировать его в виде текста.

По-видимому, я могу просто добавить PNG здесь, но я также предоставлю исходный код SVG.

начинается с <svg viewBox="0 0 664 373" width="664" height="373"

Я хочу, чтобы это выглядело так:

начинается с <svg viewBox="70 87.5 367 197" height="197" width="367"

Поэтому для достижения цели должно быть достаточно просто изменить видовое поле, ширину и высоту. Но я не знаю, как определить самые левые, правые, нижние, верхние точки, когда-либо затронутые содержимым SVG.

Кто-нибудь знает, как это сделать?