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.问题和完整代码请在评论区留言

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/129782.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android常用的工具“小插件”——Widget机制

Widget俗称“小插件”&#xff0c;是Android系统中一个很常用的工具。比如我们可以在Launcher中添加一个音乐播放器的Widget。 在Launcher上可以添加插件&#xff0c;那么是不是说只有Launcher才具备这个功能呢&#xff1f; Android系统并没有具体规定谁才能充当“Widget容器…

Java 复习笔记 - 字符串篇

文章目录 一&#xff0c;API和API帮助文档&#xff08;一&#xff09;API&#xff08;二&#xff09;API帮助文档 二&#xff0c;String概述三&#xff0c;String构造方法代码实现和内存分析四&#xff0c;字符串的比较五&#xff0c;综合练习&#xff08;一&#xff09;用户登…

100个Python数据分析常见问题.pdf

大家好&#xff0c;我是涛哥。 Python语言要说什么效率高&#xff0c;什么学习了马上能见到效果&#xff0c;那非数据分析不可。 之前安排了Python常见问题&#xff0c;爬虫常见问题&#xff0c;面试常见问题等等&#xff0c;这不涛哥也给你大家安排了数据分析问题。 希望大…

python 使用requests爬取百度图片并显示

爬取百度图片并显示 引言一、图片显示二、代码详解2.1 得到网页内容2.2 提取图片url2.3 图片显示 三、完整代码 引言 爬虫&#xff08;Spider&#xff09;&#xff0c;又称网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;是一种自动化程序&#xff0c;可以自动地浏览…

QT生成ICO文件

生成ICO文件 #include <QApplication> #include <QImage> #include <QIcon> #include <QFile> #include <QDebug> #include <QPixmap>int main(int argc, char* argv[]) {QApplication app(argc, argv);// 读取图片文件QImage image(&quo…

【实践篇】Redis最强Java客户端Redisson

文章目录 1. 前言2. Redisson基础概念2.1 数据结构和并发工具2.1.1 对Redis原生数据类型的封装和使用2.1.2 分布式锁实现和应用2.1.3 分布式集合使用方法 2.2 Redisson的高级特性2.2.1 分布式对象实现和使用2.2.2 分布式消息队列实现和使用2.2.3 分布式计数器实现和使用 3. 参考…

数字花园的指南针:微信小程序排名的提升之道

微信小程序&#xff0c;是一片数字花园&#xff0c;其中各种各样的小程序竞相绽放&#xff0c;散发出各自独特的芬芳。在这个花园中&#xff0c;排名优化就像是精心照料花朵的园丁&#xff0c;让我们一同走进这个数字花园&#xff0c;探寻如何提升微信小程序的排名优化&#xf…

自然语言处理(七):来自Transformers的双向编码器表示(BERT)

来自Transformers的双向编码器表示&#xff08;BERT&#xff09; BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种预训练的自然语言处理模型&#xff0c;由Google于2018年提出。它是基于Transformer模型架构的深度双向&#xff0…

DHTMLX Gantt 8.0.5 Crack -甘特图

8.0.5 2023 年 9 月 1 日。错误修复版本 修复 修复通过gantt.getGanttInstance配置启用扩展而触发的错误警告修复启用skip_off_time配置时gantt.exportToExcel()的不正确工作示例查看器的改进 8.0.4 2023 年 7 月 31 日。错误修复版本 修复 修复数据处理器不跟踪资源数据…

【算法】反悔贪心

文章目录 反悔贪心力扣题目列表630. 课程表 III871. 最低加油次数LCP 30. 魔塔游戏2813. 子序列最大优雅度 洛谷题目列表P2949 [USACO09OPEN] Work Scheduling GP1209 [USACO1.3] 修理牛棚 Barn RepairP2123 皇后游戏&#xff08;&#x1f6b9;省选/NOI− TODO&#xff09; 相关…

【SpringMVC】实现增删改查(附源码)

目录 引言 一、前期准备 1.1.搭建Maven环境 1.2.导入pom.xml依赖 1.3.导入配置文件 ①jdbc.properties ②generatorConfig.xml ③log4j2.xml ④spring-mybatis.xml ⑤spring-context.xml ⑥spring-mvc.xml ⑦修改web.xml文件 二、逆向生成增删改查 2.1.导入相关u…

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…

JS中 bind()的用法,call(),apply(),bind()异同点及使用,如何手写一个bind()

✨什么是bind() bind()的MDN地址 bind() 方法创建一个新函数&#xff0c;当调用该新函数时&#xff0c;它会调用原始函数并将其 this 关键字设置为给定的值&#xff0c;同时&#xff0c;还可以传入一系列指定的参数&#xff0c;这些参数会插入到调用新函数时传入的参数的前面。…

ElasticSearch第二讲:ES详解 - ElasticSearch基础概念

ElasticSearch第二讲&#xff1a;ES详解 - ElasticSearch基础概念 在学习ElasticSearch之前&#xff0c;先简单了解下ES流行度&#xff0c;使用背景&#xff0c;以及相关概念等。本文是ElasticSearch第二讲&#xff0c;ElasticSearch的基础概念。 文章目录 ElasticSearch第二讲…

G. The Morning Star

Problem - G - Codeforces 思路&#xff1a;想了挺长时间的&#xff0c;一直没想到一个简便的方法在瞎搞。我们发现对于某个点来说&#xff0c;其他的点如果能够跟他匹配&#xff0c;那么一定在这8个方向上&#xff0c;而同时这8个方向其实对应这4条直线&#xff0c;假设点为(x…

云服务器与内网穿透有什么区别?哪个好用?

云服务器与内网穿透有什么区别&#xff0c;哪个好用&#xff1f;如何在自己公网IP云主机上部署搭建P2P穿透&#xff1f;这里给大家汇总介绍一下&#xff0c;供大家共同学习了解。 云服务器的一些特点&#xff1a; 需要数据上云场景时&#xff0c;通常可以选择使用云服务器。 …

Yarn资源调度器

文章目录 一、Yarn资源调度器1、架构2、Yarn工作机制3、HDFS、YARN、MR关系4、作业提交之HDFS&MapReduce 二、Yarn调度器和调度算法1、先进先出调度器&#xff08;FIFO&#xff09;2、容量调度器&#xff08;Capacity Scheduler&#xff09;3、公平调度器&#xff08;Fair …

[Rust GUI]0.10.0版本iced代码示例 - progress_bar

-1 字体支持 iced0.10.0 仅支持指定系统内置字体(iced默认字体中文会乱码) iced0.10.0 手动加载字体的功能已经砍了&#xff0c;想手动加载就用0.9.0版本&#xff0c;文档0.9.0版本 想显示中文则需要运行在一个自带字体的Windows系统上。而且这个字体最好不要钱。 (Windows闲着…

PyCharm集成开发环境安装、启动与设置

作为非开发工程师职业,大家多多少少都会对编程有抵触,其实没有必要对Python有太大的“戒心" ,把Python当做你的一个工具就可以了。——扎克伯格 一、Python的定义&#xff1a; Python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python的设计具有…

Edge官方鼠标手势

前言 日期&#xff1a;2023年8月 Edge浏览器目前已自带官方的鼠标手势功能&#xff0c;若要使用首先将浏览器更新至最新版&#xff0c;下文介绍使用方法。 官方鼠标手势 前提 更新Edge至最新版&#xff0c;并关闭其它鼠标手势扩展。 开启鼠标手势 打开Edge浏览器的设置&…