web pdf 拖拽签章

这篇具有很好参考价值的文章主要介绍了web pdf 拖拽签章。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

web pdf 拖拽签章

主要通过火狐的pdfjs 来实现

1. 下载js 并编译

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

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

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

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

3.效果展示

  1. 原图
    web pdf 拖拽签章,前端,pdf,javascript
  2. 签字后

web pdf 拖拽签章,前端,pdf,javascript文章来源地址https://www.toymoban.com/news/detail-694764.html

  1. 下载后
    web pdf 拖拽签章,前端,pdf,javascript

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 = false
    var downFlag = false
    var body
    var 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').value
        window.open("/index/saveAndDown?val=" + val)
    }

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

到了这里,关于web pdf 拖拽签章的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端 Javascript笔记3

     内存中的生命周期         1、内存分配         2、内存使用(读写)         3、内存回收,使用完毕之后,垃圾回收器完成         内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈:数据存在其中会自动释放 堆:对象,根据程序员的操作来决定释

    2024年04月15日
    浏览(47)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(58)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(101)
  • web前端javascript笔记——(13)事件(1)

    鼠标/键盘属性 altKey               返回当事件被触发时,“ALT”是否被按下。 button               返回当事件被触发时,哪个鼠标按钮被点击 clientX               返回当事件被触发时,鼠标指针的水平坐标。 clientY               返回当事件被触

    2024年01月25日
    浏览(52)
  • web前端javaScript笔记——(11)DOM

    属性                                     此事件发生在何时 onabort 图像的加载被中断。 onblur                                   元素失去焦点。 anchange                                 域的内容被改变 onclick  当用户点击某

    2024年01月19日
    浏览(60)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(57)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(64)
  • 19个Web前端交互式3D JavaScript框架和库

    JavaScript (JS) 是一种轻量级的解释(或即时编译)编程语言,是世界上最流行的编程语言。JavaScript 是一种基于原型的多范式、单线程的动态语言,支持面向对象、命令式和声明式(例如函数式编程)风格。JavaScript 几乎可以做任何事情,更可以在包括物联网在内的多个平台

    2024年02月22日
    浏览(48)
  • Web前端大作业制作个人网页(html+css+javascript)

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页

    2024年02月10日
    浏览(58)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包