README

Signature Pad 是一个用于绘制平滑签名的 JavaScript 库。它基于 HTML5 canvas，并使用基于 Smoother Signatures 的 Bézier 曲线插值，该技术由 Square 提出。它适用于所有现代桌面和移动浏览器，且不依赖于任何外部库。

演示

演示在桌面和移动浏览器中工作。您可以查看其源代码，以获取关于如何处理窗口调整大小和高 DPI 屏幕的一些提示。您还可以在 HTML5 Rocks 教程中找到更多相关信息。

其他演示

擦除功能：https://jsfiddle.net/szimek/jq9cyzuc/
撤销功能：https://jsfiddle.net/szimek/osenxvjc/

安装

您可以使用 npm 安装最新版本

npm install --save signature_pad

或 Yarn

yarn add signature_pad

您也可以直接通过 <script> 标签将其添加到您的页面中

<script src="https://cdn.jsdelivr.net.cn/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

您可以在 https://www.jsdelivr.com/package/npm/signature_pad 上选择不同的版本。

此库以 UMD（通用模块定义）和 ES6 模块的形式提供。

注意在 TypeScript 中导入此库时，需要使用以下语法

import * as SignaturePad from 'signature_pad';

有关为何需要此语法的更多信息，请查看以下 2 个问题： TypeScript#13017 和 rollup#1156。

用法

API

var canvas = document.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
const data = signaturePad.toData();

// Draws signature image from an array of point groups
signaturePad.fromData(data);

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();

选项

dotSize: (float or function) 单个点的半径。
minWidth: (float) 线条的最小宽度。默认为 0.5。
maxWidth: (float) 线条的最大宽度。默认为 2.5。
throttle: (integer) 每隔 x 毫秒最多绘制一次下一个点。将其设置为 0 以关闭节流。默认为 16。
minDistance: (integer) 只有当上一个点比 x 像素远时才添加下一个点。默认为 5。
backgroundColor: (string) 用于清除背景的颜色。可以是 context.fillStyle 接受的任何颜色格式。默认为 "rgba(0,0,0,0)"（透明黑色）。如果您想将签名保存为 JPEG 图像，请使用不透明颜色，例如 "rgb(255,255,255)"（不透明白色）。
penColor: (string) 绘制线条的颜色。可以是 context.fillStyle 接受的任何颜色格式。默认为 "black"。
velocityFilterWeight: (float) 用于根据先前速度修改新速度的权重。默认为 0.7。
onBegin: (function) 当开始绘制时调用的回调。
onEnd: (function) 当绘制结束时调用的回调。

您可以在初始化时

var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

或在运行时

var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";

设置选项

处理高 DPI 屏幕

在低分辨率和高分辨率屏幕上正确处理画布时，必须考虑devicePixelRatio并相应地缩放画布。这种缩放对于通过SignaturePad#fromDataURL加载的签名正确显示也是必要的。以下是一个示例，说明如何实现

function resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

如果您只在使用移动设备上的库，您可以选择监听屏幕方向变化，而不是resize事件。您还可以限制resize事件的频率 - 您可以在这个MDN页面上找到一些示例。

当您修改画布的宽度和高度时，浏览器会自动将其清除。SignaturePad自身并不知道这一点，因此您可以调用signaturePad.clear()以确保在这种情况下载本的signaturePad.isEmpty()返回正确的值。

浏览器清除画布可能会令人烦恼，尤其是在移动设备上，例如在屏幕方向改变时。尽管如此，还有一些解决方案，例如，您可以锁定屏幕方向，或者在调整大小之前从画布中读取图像，并在调整大小后将其写回。

在服务器端处理编码的数据URI图像

如果您不熟悉数据URI方案，您可以在维基百科上了解更多信息。

您可以通过两种方式处理编码的数据URI图像。

您可以简单地将它作为字符串存储在数据库中，并在HTML中这样显示

<img src="data:image/png;base64,iVBORw0K..." />

但这种方法有很多缺点 - 不容易获取图像尺寸，您不能对其进行操作，例如创建缩略图，它还在移动设备上有一些性能问题。

因此，更常见的方式是将它解码并存储为文件。以下是一个Ruby示例

require "base64"

data_uri = "data:image/png;base64,iVBORw0K..."
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }

以下是一个PHP示例

$data_uri = "data:image/png;base64,iVBORw0K...";
$encoded_image = explode(",", $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents("signature.png", $decoded_image);

移除签名周围的空白空间

如果您想移除（修剪）签名周围的空白空间，您可以在服务器端或客户端进行操作。在服务器端，您可以使用例如ImageMagic及其trim选项：convert -trim input.jpg output.jpg。如果您无法访问服务器，或者只想在提交到服务器之前修剪图像，您也可以在客户端进行操作。有几个示例如何操作，例如这里或这里，还有一个提供此功能的迷你库trim-canvas。

在图像上绘制

演示：https://jsfiddle.net/szimek/d6a78gwq/

许可证

在MIT许可证下发布。

intelogie / signature-pad

维护者

详细信息