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

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript