在jsp利用canvas画布实现PDF文件签名的功能

最新推荐文章于 2025-04-21 20:52:19 发布

大点声？听不见

最新推荐文章于 2025-04-21 20:52:19 发布

阅读量624

点赞数 6

文章标签： java pdf 开发语言

本文链接：https://blog.csdn.net/qq_55932305/article/details/139242468

版权

canvas是一个可以在上面通过javaScript画图的标签

这是前端展示的一个效果

点击取消，清除画布内的所有元素，点击保存，会将图片传到save-signature路径下

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名</title>
</head>
<body>
<!--
    大白话就是canvas是一个可以在上面通过javaScript画图的标签，
    通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色
 -->
<canvas id="canvas"></canvas>
<div>
    <button id="cancel">取消</button>
    <button id="save">保存</button>
</div>
</body>
<script>
    const cbtn = document.getElementById('cancel')
    const sbtn = document.getElementById('save')
    /** @type {HTMLCanvasElement} */
        // 获取canvas实例
    const canvas = document.getElementById("canvas")
    // 配置信息
    const config = {
        width:400,
        height:200,
        lineWidth:5,        // 线宽
        strokeStyle:'black',  // 线条颜色
        lineCap:'round',    // 线条两端圆点
        lineJoin:'round'    // 线条交汇处圆角
    }
    canvas.width = config.width
    canvas.height = config.height
    canvas.style.border = '1px solid #000'
    // canvas.style.backgroundColor = 'yellow'
    // 创建画布
    let ctx = canvas.getContext('2d')
    let client &

最低0.47元/天解锁文章