Canvas 移动端用户签字确认功能，同意后保存照片直接转base64

原创

于 2020-01-16 18:30:31 发布 · 634 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #css #html #javascript

移动端开发时拿到一个【用户签字确认功能】的需求，我这边使用的 Canvas 来记录用户的写字轨迹，达到储存签字照片的功能。
以下是下来参照这个需求做的一个简单demo，希望能够对大家有所帮助~~~~~~~~
在这里插入图片描述
HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../css/global.css">
    <title>Document</title>
</head>

<body>
    <div id="canvas">
        <p id='tip'>请签字确认：</p>
        <p id="clearCanvas">重写</p>
        <p id="saveCanvas">确认签字</p>
    </div>
</bo