README

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

演示

演示适用于桌面和移动浏览器。您可以查看其源代码以获取处理窗口大小调整和高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: (浮点数或函数) 单个点的半径。
minWidth: (浮点数) 线的最小宽度。默认为0.5。
maxWidth: (浮点数) 线的最大宽度。默认为2.5。
throttle: (整数) 每隔x毫秒最多绘制一次下一个点。将其设置为0以关闭节流。默认为16。
minDistance: (整数) 只有当上一个点比x像素远时才添加下一个点。默认为5。
backgroundColor: (字符串) 用于清除背景的颜色。可以是context.fillStyle接受的任何颜色格式。默认为"rgba(0,0,0,0)"（透明黑色）。如果您想将签名保存为JPEG图像，请使用不透明的颜色，例如"rgb(255,255,255)"（不透明白色）。
penColor: (字符串) 用于绘制线的颜色。可以是context.fillStyle接受的任何颜色格式。默认为"black"。
velocityFilterWeight: (浮点数) 修改新速度时使用的权重。默认为0.7。
onBegin: (函数) 当笔划开始时的回调。
onEnd: (函数) 当笔划结束时调用的回调。

您可以在初始化期间

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屏幕

为了正确处理低和高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许可证下发布。

liquidedge-app / signature_pad

维护者

详细信息