当前位置: 首页 > news >正文

web pdf 拖拽签章

web pdf 拖拽签章

主要通过火狐的pdfjs 来实现

1. 下载js 并编译

地址 https://mozilla.github.io/pdf.js/
按照官网当下下载并编译就得到了js

2.其实也没有什么好讲的,都是用的js中的方法,官网中都有

按照步骤就能生成一个document元素,然后通过js方法操作元素就好了。

注意web页面显示的元素的大小和元素的大小不一样,要注意比例

3.效果展示

  1. 原图
    在这里插入图片描述
  2. 签字后

在这里插入图片描述

  1. 下载后
    在这里插入图片描述

4.代码展示

<div><div class="container"><div class="left" id="canvas"></div><div class="right"><ul><li><img class="sign-img" th:src="@{/sign/img.jpg}" onmousedown="srcImgMoveDown(this);" /></li></ul><button type="button" onclick="saveAndDown();">保存并下载</button></div></div><input type="hidden" value="" id="hiddenInput">
</div><script>var moveFlag = falsevar downFlag = falsevar bodyvar scale = 1.5;window.onload = function () {document.body.ondrop = function(event) {event.preventDefault();event.stopPropagation();}getPdf()body = document.getElementsByTagName('body')[0]body.addEventListener('mousemove',function(eve){if(!moveFlag){return}var img = document.getElementById('moveImg')img.style.position = 'fixed'img.style.top = eve.clientY + 'px'img.style.left = eve.clientX + 'px'})document.getElementById('canvas').addEventListener('click',function (){moveFlag = !moveFlag})}function getPdf() {var loadingTask = pdfjsLib.getDocument("/index/getPdf")loadingTask.promise.then(function (pdf) {for (let i = 1; i <= pdf.numPages; i++) {pdf.getPage(i).then(function (page) {var viewport = page.getViewport({scale: scale,});var outputScale = window.devicePixelRatio || 1;var canvas = document.createElement('canvas')canvas.setAttribute('name','canvas')canvas.setAttribute('id','canvas'+i)canvas.addEventListener('mouseup',eleClick)var context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height = Math.floor(viewport.height) + "px";var transform = outputScale !== 1? [outputScale, 0, 0, outputScale, 0, 0]: null;var renderContext = {canvasContext: context,transform: transform,viewport: viewport,background:'beige'};page.render(renderContext);document.getElementById('canvas').appendChild(canvas)});}})}function eleClick(even){let clientX = even.pageX - this.offsetLeft;let clientY = even.pageY - this.offsetTop;let id = this.getAttribute('id')console.log(id,clientX,clientY)document.getElementById('hiddenInput').value = clientX + "," +clientY + "," + id + "," + scale}function srcImgMoveDown(obj){var _img = document.getElementById('moveImg')console.log(_img)if(_img){return}var img = document.createElement('img')img.setAttribute('class',obj.getAttribute('class'))img.setAttribute('src',obj.getAttribute('src'))img.setAttribute('id','moveImg')body.appendChild(img)moveFlag = true}function saveAndDown(){var val =  document.getElementById('hiddenInput').valuewindow.open("/index/saveAndDown?val=" + val)}

5.问题和完整代码请在评论区留言

相关文章:

web pdf 拖拽签章

web pdf 拖拽签章 主要通过火狐的pdfjs 来实现 1. 下载js 并编译 地址 https://mozilla.github.io/pdf.js/ 按照官网当下下载并编译就得到了js 2.其实也没有什么好讲的&#xff0c;都是用的js中的方法&#xff0c;官网中都有 按照步骤就能生成一个document元素&#xff0c;然…...

SQLAlchemy 库创建数据库引擎和会话工厂附带SQLSERVER驱动版本确认方式

SQLAlchemy 库创建数据库引擎和会话工厂 from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker# 创建数据库引擎 engine create_engine(mssqlpyodbc://user:passhost:port/database?driverODBCDriver11forSQLServer)# 创建会话工厂 Session sess…...

用Python登录账户

1 问题 如何利用python登录账户&#xff1f; 2 方法 账户和密码存放在文件夹中从文件夹中读取并比较密码密文验证三次后&#xff0c;如不成功则锁定用户 通过。。。。。。。。等证明提出的方法是有效的&#xff0c;能够解决开头提出的问题。 代码清单 1 import osimport getpas…...

梳理下我自已对Reactor与及IO多路复用的select\poll\epoll的理解

Reactor是一种设计思想的落地&#xff0c;其中IO多路复用的具体落地&#xff1a;select\poll\epoll。都是基于Reactor的延伸。它的核心是Reactor与资源处理器。Reactor负责监听与事件的分发&#xff0c;事件包括连接事件、读事件、写事件。 具体的流程是系统调用监听请求&…...

4. 广播变量

一、分区规则&#xff08;DataStream Broadcast&#xff09;和广播变量&#xff08;Flink Broadcast&#xff09; 1.1 DataStream Broadcast&#xff08;分区规则&#xff09; ​ 分区规则是把元素广播给所有的分区&#xff0c;数据会被重复处理。 DataStream.broadcast()1.…...

GPT 内部 — I : 了解文本生成

年轻的陀思妥耶夫斯基被介绍给生成AI&#xff0c;通过Midjourney创建 一、说明 我经常与不同领域的同事互动&#xff0c;我喜欢向几乎没有数据科学背景的人传达机器学习概念的挑战。在这里&#xff0c;我试图用简单的术语解释 GPT 是如何连接的&#xff0c;只是这次是书面形式。…...

平板触控笔哪款好用?好用的第三方apple pencil

而对于那些把ipad当做学习工具的人而言&#xff0c;苹果Pencil就成了必备品。但因为苹果Pencil太贵了&#xff0c;不少的学生们买不起。因此&#xff0c;最佳的选择还是平替电容笔&#xff0c;今天在这里整理了一些高性价比的电容笔&#xff01; 一、挑选电容笔的要点&#xf…...

Mac 上更新系统PATH环境变量

目录 为什么要更新系统的PATH环境变量如何更新系统的PATH环境变量1. 确保你知道工具的实际安装位置。2. 将目录&#xff08;实际安装位置&#xff09;添加到PATH&#xff1a;export PATH$PATH:/path/to/your/tools补充&#xff1a;通过以下方法来确定当前正在使用的是Bash还是Z…...

Visual Studio Code 终端配置使用 MySQL

Visual Studio Code 终端配置使用 MySQL 找到 MySQL 的 bin 目录 在导航栏中搜索–》服务 找到MySQL–>双击 在终端切换上面找到的bin目录下输入指令 终端为Git Bash 输入命令 ./mysql -u root -p 接着输入密码&#xff0c;成功在终端使用 MySQL 数据库。...

12 | 使用 Spark SQL执行CURL

Spark SQL 是 Apache Spark 生态系统中的一个组件,它提供了用于结构化数据处理和分析的高级接口。Spark SQL 可以让用户使用 SQL 语言来查询和操作数据,同时也提供了强大的分布式计算能力。下面是关于 Spark SQL、SparkSession 和 DataFrame 的关键点: 1. Spark SQL: 定义…...

容器编排学习(七)控制器介绍与使用

一 控制器 控制器是 k8s内置的管理工具。可以帮助用户实现 Pod的自动部署、自维护、扩容、滚动更新等功能的自动化程序。 为什么要使用控制器? 有大量的 Pod需要维护管理需要维护 Pod的健康状态控制器可以像机器人一样可以替用户完成维护管理的工作 二 Deployment 1 概…...

一文看懂微信小程序新版隐私协议(附带弹窗组件)

一、前言 微信小程序近期又迎来了一次改革–9月15日之后如果小程序涉及调用微信的隐私接口获取用户的信息的&#xff0c;需要用户手动同意协议后才可正常调用接口&#xff0c;否则会返回报错信息。 隐私接口目前常用的有&#xff1a;手机号快捷获取、读取照片、获取用户的头像…...

Java认识异常(超级详细)

目录 异常的概念和体系结构 异常的概念 异常的体系结构 异常的分类 1.编译时异常 2.运行时异常 异常的处理 防御式编程 LBYL EAFP 异常的抛出 异常的捕获 异常声明throws try-catch捕获并处理 finally 异常的处理流程 异常的概念和体系结构 异常的概念 在Java中…...

危险边缘:揭示 Python 编程中易被忽视的四个安全陷阱

今天我们将要谈论一个非常重要的话题&#xff1a;Python 编程中的安全问题。作为一门广受欢迎的编程语言&#xff0c;Python 已经成为了许多开发者、计算机专业学生以及打工人的必备技能。 原文链接食用更佳 危险边缘&#xff1a;揭示 Python 编程中易被忽视的四个安全问题 然…...

抖店开通后,新手必须要知道的几个做店技巧,建议认真看完

我是王路飞。 抖店的运营&#xff0c;无非就是围绕【产品】【流量】展开的。 你要是能把这两个点给搞明白&#xff0c;新店快速出单、真是爆单就不再是问题了。 今天就给你们说一下&#xff0c;抖店开通后&#xff0c;作为一个新手商家&#xff0c;你必须要知道的几个做店技…...

FPGA时序分析与约束(5)——时序路径

一、前言 在之前的文章中我们分别介绍了组合电路的时序&#xff0c;时序电路的时序和时钟的时序问题&#xff0c;我们也对于时序分析&#xff0c;时序约束和时序收敛几个基本概念进行了区分&#xff0c;在这篇文章中&#xff0c;我们将介绍时序约束相关的最后一部分基本概念&am…...

Flutter:构建跨平台应用的未来选择

随着移动设备的普及和技术的不断发展&#xff0c;跨平台移动应用开发成为了一个热门的需求。Flutter作为一款由Google开发的开源移动应用开发框架&#xff0c;受到了越来越多的关注。本文将带你了解Flutter的优势、应用场景以及如何使用Flutter进行开发。 一、Flutter的优势 …...

08_瑞萨GUI(LVGL)移植实战教程之LVGL对接串口打印

本系列教程配套出有视频教程&#xff0c;观看地址&#xff1a;https://www.bilibili.com/video/BV1gV4y1e7Sg 8. LVGL对接串口打印 本次实验我们为LVGL库对接串口的打印功能。 8.1 复制工程 上次实验得出的工程我们可以通过复制在原有的基础上得到一个新的工程。 如果你不清…...

【LeetCode75】第五十题 无限集中的最小数字

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 这是我们在LeetCode75里遇到的第二道设计类题目&#xff0c;难度比上一次的设计题目要难上一些。 题目假设我们拥有一个从1开始的无限集…...

关于 Unity 连接 MuMu 模拟器上的 Unity Remote 5 的方法

在使用 Unity 开发 Android 的过程中&#xff0c;可以通过使用 Unity Remote 这个 app 来和真机连接&#xff0c;进而在真实环境下进行测试性能等工作&#xff0c;而本次则是由于其他问题引出的一个小坑&#xff0c;记录以备后续查询。 这次是由于在自学过程中遇到的一个工程&…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...