vue手写签名组件_Vue签名板组件

vue手写签名组件

Vue签名板 (Vue Signature Pad)

Vue component wrap for signature pad.

Vue组件包装，用于签名板。

View Demo 查看演示 Download Source 下载源

演示版 (Demo)

Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

演示可在台式机和移动浏览器中运行。 您可以查看其源代码，以获取有关如何处理窗口大小调整和高DPI屏幕的一些技巧。 您还可以在HTML5 Rocks教程中找到有关后者的更多信息。

其他演示 (Other demos)

• Erase feature: https://jsfiddle.net/szimek/jq9cyzuc/

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

• Undo feature: https://jsfiddle.net/szimek/osenxvjc/

  撤消功能： https ： //jsfiddle.net/szimek/osenxvjc/

安装 (Installation)

You can install the latest release using npm:

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

npm install --save signature_pad

or Yarn:

或纱线：

yarn add signature_pad

You can also add it directly to your page using <script> tag:

您也可以使用<script>标签将其直接添加到页面中：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>

You can select a different version at https://www.jsdelivr.com/package/npm/signature_pad.

您可以在https://www.jsdelivr.com/package/npm/signature_pad中选择其他版本。

This library is provided as UMD (Universal Module Definition) and ES6 module.

该库以UMD(通用模块定义)和ES6模块的形式提供。

用法 (Usage)

API (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("https://img-blog.csdnimg.cn/2022010614545115066.png");

// 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();

选件 (Options)

dotSize dotSize

(float or function) Radius of a single dot.

(浮点数或函数)单个点的半径。

minWidth minWidth

0.5. 0.5 。

maxWidth maxWidth

2.5. 2.5 。

throttle 风门

x milliseconds. Set it to x毫秒最多绘制一次下一个点。 将其设置为 0 to turn off throttling. Defaults to 0以关闭节流。 默认为 16. 16 。

minDistance minDistance

x pixels. Defaults to x像素远时才添加下一个点。 默认为 5. 5 。

backgroundColor 背景颜色

context.fillStyle. Defaults to context.fillStyle接受的任何颜色格式。 默认为 "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgba(0,0,0,0)" (透明黑色)。 如果要将签名保存为JPEG图像，请使用非透明颜色，例如 "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images. "rgb(255,255,255)" (不透明白色)。

penColor penColor

context.fillStyle. Defaults to context.fillStyle接受的任何颜色格式。 默认为 "black". "black" 。

velocityFilterWeight velocityFilterWeight

0.7. 0.7

onBegin onBegin

(function) Callback when stroke begin.

(功能)中风开始时的回调。

onEnd 结束

(function) Callback when stroke end.

(功能)行程结束时进行回调。

You can set options during initialization:

您可以在初始化期间设置选项：

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

or during runtime:

或在运行时：

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

技巧和窍门 (Tips and tricks)

处理高DPI屏幕 (Handling high DPI screens)

To correctly handle canvas on low and high DPI screens one has to take devicePixelRatio into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via SignaturePad#fromDataURL. Here's an example how it can be done:

为了在低DPI和高DPI屏幕上正确处理画布，必须考虑devicePixelRatio并相应地缩放画布。 为了正确显示通过SignaturePad#fromDataURL加载的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();

Instead of resize event you can listen to screen orientation change, if you're using this library only on mobile devices. You can also throttle the resize event - you can find some examples on this MDN page.

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

When you modify width or height of a canvas, it will be automatically cleared by the browser. SignaturePad doesn't know about it by itself, so you can call signaturePad.clear() to make sure that signaturePad.isEmpty() returns correct value in this case.

修改画布的宽度或高度时，浏览器会自动清除它。 SignaturePad本身并不了解它，因此在这种情况下，您可以调用signaturePad.clear()以确保signaturePad.isEmpty()返回正确的值。

This clearing of the canvas by the browser can be annoying, especially on mobile devices e.g. when screen orientation is changed. There are a few workarounds though, e.g. you can lock screen orientation, or read an image from the canvas before resizing it and write the image back after.

浏览器对画布的这种清除可能很烦人，尤其是在移动设备上，例如，当屏幕方向改变时。 但是，有一些解决方法，例如，您可以锁定屏幕方向 ，或者在调整大小之前从画布读取图像，然后再写回图像。

在服务器端处理数据URI编码的图像 (Handling data URI encoded images on the server side)

If you are not familiar with data URI scheme, you can read more about it on Wikipedia.

如果您不熟悉数据URI方案，则可以在Wikipedia上阅读有关它的更多信息。

There are 2 ways you can handle data URI encoded images.

有两种方法可以处理数据URI编码的图像。

You could simply store it in your database as a string and display it in HTML like this:

您可以简单地将它作为字符串存储在数据库中，并以HTML形式显示，如下所示：

<img src="https://img-blog.csdnimg.cn/2022010614545115066.png" />

but this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.

但是这种方式有很多缺点-获取图像尺寸并不容易，您无法操纵它(例如创建缩略图)，并且在移动设备上也存在一些性能问题 。

Thus, more common way is to decode it and store as a file. Here's an example in Ruby:

因此，更常见的方法是对其进行解码并存储为文件。 这是Ruby中的示例：

require "base64"

data_uri = "https://img-blog.csdnimg.cn/2022010614545115066.png"
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }

Here's an example in PHP:

这是PHP中的示例：

$data_uri = "https://img-blog.csdnimg.cn/2022010614545115066.png";
$encoded_image = explode(",", $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents("signature.png", $decoded_image);

Here's an example in C# for ASP.NET:

这是ASP.NET的C＃示例：

var dataUri = "https://img-blog.csdnimg.cn/2022010614545115066.png";
var encodedImage = dataUri.Split(",")[1];            
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature.png", decodedImage);

删除签名周围的空白区域 (Removing empty space around a signature)

If you'd like to remove (trim) empty space around a signature, you can do it on the server side or the client side. On the server side you can use e.g. ImageMagic and its trim option: convert -trim input.jpg output.jpg. If you don't have access to the server, or just want to trim the image before submitting it to the server, you can do it on the client side as well. There are a few examples how to do it, e.g. here or here and there's also a tiny library trim-canvas that provides this functionality.

如果要删除签名周围的空白空间，可以在服务器端或客户端上进行。 在服务器端，您可以使用例如ImageMagic及其trim选项： convert -trim input.jpg output.jpg 。 如果您无权访问服务器，或者只想在将图像提交到服务器之前修剪图像，则也可以在客户端进行操作。 这里有一些示例，例如在此处或此处 ，还有一个很小的库装饰画布可以提供此功能。

绘制图像 (Drawing over an image)

Demo: https://jsfiddle.net/szimek/d6a78gwq/

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

翻译自: https://vuejsexamples.com/vue-signature-pad-component/

vue手写签名组件