html+js手写签名并存为图片

冰羽幻灵

已于 2024-10-28 15:27:59 修改

阅读量384

点赞数 8

分类专栏： # JavaScript 文章标签： html javascript 前端

于 2024-10-22 11:01:08 首次发布

本文链接：https://blog.csdn.net/zxl761303248/article/details/143110557

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

html+js手写签名并存为图片

安装@xueui/util
调用方法及使用说明（支持es/commonjs/umd）
使用例子（umd）
效果预览

安装@xueui/util

npm install @xueui/util@1.2.1

调用方法及使用说明（支持es/commonjs/umd）

// es调用
import { domUtil } from "@xueui/util"; 
// commonjs调用
const domUtil= require("@xueui/util/dist").domUtil; 
// umd调用
<script src="./node_modules/@xueui/util/umd/index.js"></script>
const domUtil = xueUtil.domUtil;
// 使用说明
domUtil.signByCanvas({
	width: 600, // 不传则默认画板宽 600px
	height: 200, // 不传则默认画板高200px
	imgId: "signImg", // 签名完成自动将id为signImg的img标签设置base64签名图，可不传，在回调中获取base64自己赋值
	callback(res){
		console.log(res.type); // confirm:确认回调；clear:清除回调；cancel:取消回调
		console.log(res.data); // 确认回调时，返回签名图片的base64
	}
})

使用例子（umd）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/@xueui/util/umd/index.js"></script>
    <script>
        function sign() {
            xueUtil.domUtil.signByCanvas({
                imgId: "signImgId",
                callback(res) {
                    console.log(res);
                }
            });
        }
    </script>
</head>

<body>
    <button onclick="sign()">签名</button>
    <img id="signImgId" style="width:300px;height: 100px;" src="" alt="">
</body>

</html>

效果预览

在这里插入图片描述