Question

我想使用画布在pdf中绘制一个框并找出绘制框的坐标。选择pdf后，我在这里有一个代码，它将转换为画布，并在该画布上创建框，但框未显示。为此，请使用javascript pdf.js和pdf.worker.js

要使用此代码，请使用附加的javascript文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.5.188/pdf.worker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.5.188/pdf.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<style type="text/css">

#upload-button {
    width: 150px;
    display: block;
    margin: 20px auto;
}

#file-to-upload {
    display: none;
}

#pdf-main-container {
    width: 400px;
    margin: 20px auto;
}

#pdf-loader {
    display: none;
    text-align: center;
    color: #999999;
    font-size: 13px;
    line-height: 100px;
    height: 100px;
}

#pdf-contents {
    display: none;
}

#pdf-meta {
    overflow: hidden;
    margin: 0 0 20px 0;
}

#pdf-buttons {
    float: left;
}

#page-count-container {
    float: right;
}

#pdf-current-page {
    display: inline;
}

#pdf-total-pages {
    display: inline;
}

#pdf-canvas {
    border: 1px solid rgba(0,0,0,0.2) transparent;
    box-sizing: border-box;
    background-color:yellow;
}

#page-loader {
    height: 100px;
    line-height: 100px;
    text-align: center;
    display: none;
    color: #999999;
    font-size: 13px;
}

.rectangle {
        border: 1px solid #FF0000;
        position: absolute;
    }

</style>

<script type="text/javascript">
function initDraw(canvas) {
    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var element = null;    
    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';

            console.log('width : '+ element.style.width);
            console.log('height : '+ element.style.height);
            console.log('left : '+ element.style.left);
            console.log('top : '+ element.style.top);


        }
    }

    canvas.onclick = function (e) {
        if (element !== null) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
        } else {
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
             console.log(mouse.x);
              console.log(mouse.y);
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
            canvas.style.cursor = "crosshair";
        }
    }
}
</script>

</head>

<body>

<button id="upload-button">Select PDF</button> 
<input type="file" id="file-to-upload" accept="application/pdf" />

<div id="pdf-main-container">
    <div id="pdf-loader">Loading document ...</div>
    <div id="pdf-contents">
        <div id="pdf-meta">
            <div id="pdf-buttons">
                <button id="pdf-prev">Previous</button>
                <button id="pdf-next">Next</button>
            </div>
            <div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>
        </div>
        <canvas id="pdf-canvas" width="400"></canvas>
        <div id="page-loader">Loading page ...</div>
    </div>
    <script>
        initDraw(document.getElementById('pdf-canvas'));
    </script>
</div>

<script>

var __PDF_DOC,
    __CURRENT_PAGE,
    __TOTAL_PAGES,
    __PAGE_RENDERING_IN_PROGRESS = 0,
    __CANVAS = $('#pdf-canvas').get(0),
    __CANVAS_CTX = __CANVAS.getContext('2d');

function showPDF(pdf_url) {
    $("#pdf-loader").show();

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
        __PDF_DOC = pdf_doc;
        __TOTAL_PAGES = __PDF_DOC.numPages;

        // Hide the pdf loader and show pdf container in HTML
        $("#pdf-loader").hide();
        $("#pdf-contents").show();
        $("#pdf-total-pages").text(__TOTAL_PAGES);

        // Show the first page
        showPage(1);
    }).catch(function(error) {
        // If error re-show the upload button
        $("#pdf-loader").hide();
        $("#upload-button").show();

        alert(error.message);
    });;
}

function showPage(page_no) {
    __PAGE_RENDERING_IN_PROGRESS = 1;
    __CURRENT_PAGE = page_no;

    // Disable Prev & Next buttons while page is being loaded
    $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');

    // While page is being rendered hide the canvas and show a loading message
    $("#pdf-canvas").hide();
    $("#page-loader").show();

    // Update current page in HTML
    $("#pdf-current-page").text(page_no);

    // Fetch the page
    __PDF_DOC.getPage(page_no).then(function(page) {
        // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
        var scale_required = __CANVAS.width / page.getViewport(1).width;

        // Get viewport of the page at required scale
        var viewport = page.getViewport(scale_required);

        // Set canvas height
        __CANVAS.height = viewport.height;

        var renderContext = {
            canvasContext: __CANVAS_CTX,
            viewport: viewport
        };

        // Render the page contents in the canvas
        page.render(renderContext).then(function() {
            __PAGE_RENDERING_IN_PROGRESS = 0;

            // Re-enable Prev & Next buttons
            $("#pdf-next, #pdf-prev").removeAttr('disabled');

            // Show the canvas and hide the page loader
            $("#pdf-canvas").show();
            $("#page-loader").hide();
        });
    });
}

// Upon click this should should trigger click on the #file-to-upload file input element
// This is better than showing the not-good-looking file input element
$("#upload-button").on('click', function() {
    $("#file-to-upload").trigger('click');
});

// When user chooses a PDF file
$("#file-to-upload").on('change', function() {
    // Validate whether PDF
    if(['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
        alert('Error : Not a PDF');
        return;
    }

    $("#upload-button").hide();

    // Send the object url of the pdf
    showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
});

// Previous page of the PDF
$("#pdf-prev").on('click', function() {
    if(__CURRENT_PAGE != 1)
        showPage(--__CURRENT_PAGE);
});

// Next page of the PDF
$("#pdf-next").on('click', function() {
    if(__CURRENT_PAGE != __TOTAL_PAGES)
        showPage(++__CURRENT_PAGE);
});

</script>

</body>
</html>

Answer 1

我有相同的要求。

检查此链接。我在这里为您制作了演示。 http://testchat32.tk/PDF/

检查页面源中的JavaScript代码。

让我知道您是否需要所有zip文件。这是index file

以下是绘制矩形的代码。剩下的就是已经存在的PDF.js。

"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("pdf-canvas");
const ctx = canvas.getContext("2d");
const storedRects = [];
const baseImage = loadImage("");
var refresh = true;
const rect = (() => {
    var x1, y1, x2, y2;
    var show = false;
    function fix() {
        rect.x = Math.min(x1, x2);
        rect.y = Math.min(y1, y2);
        rect.w = Math.max(x1, x2) - Math.min(x1, x2);
        rect.h = Math.max(y1, y2) - Math.min(y1, y2);


         jQuery("body").click(function(e) {
            console.log(rect.x+'='+rect.y+'='+rect.w+'='+rect.h);
             $('#output').html('current x : '+rect.x+', current y : '+rect.y+', width : '+rect.w+', height : '+rect.h);

            if (e.target.id == "pdf-canvas") {
                ddrag();
                jQuery(".position_x").val(rect.x);
                jQuery(".position_y").val(rect.y);
                jQuery(".position_w").val(rect.w);
                jQuery(".position_h").val(rect.h);
            }
         });
    }
    function draw(ctx) { 
        ctx.clearRect(this.x, this.y, this.w, this.h);
        ctx.strokeRect(this.x, this.y, this.w, this.h) 
        }
    const rect = {x : 0, y : 0, w : 0, h : 0,  draw};
    const API = {
        restart(point) {
            x2 = x1 = point.x;
            y2 = y1 = point.y;
            fix();
            show = true;
        },
        update(point) {
            x2 = point.x;
            y2 = point.y;
            fix();
            show = true;
        },
        toRect() {
            show = false;
            return Object.assign({}, rect);
        },
        draw(ctx) {
            if (show) { rect.draw(ctx) }
        },
        show : false,
    }
    return API;
})();

function loadImage(url) {
    const image = new Image();
    image.src = url;
    image.onload = () => refresh = true;
    return image;
}

const mouse = {
    button : false,
    x : 0,
    y : 0,
    down : false,
    up : false,
    element : null,
    event(e) {

        const m = mouse;
        m.bounds = m.element.getBoundingClientRect();
        m.x = e.pageX - m.bounds.left - scrollX;
        m.y = e.pageY - m.bounds.top - scrollY;
        const prevButton = m.button;
        m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
        if (!prevButton && m.button) { m.down = true; 
            /*
            var cv=document.createElement('canvas'); 
            cv.width=canvas.width;
            cv.height=canvas.height;
            */
        }
        if (prevButton && !m.button) { m.up = true }
    },
    start(element) {
        mouse.element = element;
        "down,up,move".split(",").forEach(name => document.addEventListener("mouse" + name, mouse.event));
    }
}

mouse.start(canvas);
function draw() {

    const storedRects = [];
    ctx.restore();

    ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "yellow";
    storedRects.forEach(rect => rect.draw(ctx));
    ctx.strokeStyle = "red";
    rect.draw(ctx);
}
function mainLoop() {
    if (refresh || mouse.down || mouse.up || mouse.button) {
        refresh = false;
        if (mouse.down) {
            mouse.down = false;
            rect.restart(mouse);
        } else if (mouse.button) {
            rect.update(mouse);
        } else if (mouse.up) {
            mouse.up = false;
            rect.update(mouse);
            //storedRects.push(rect.toRect());
        }
        draw();
    }
    requestAnimationFrame(mainLoop)
}

function clearCanvas (canvas)
{
    const storedRects = [];
    //alert(jQuery(".position_x").val());
    jQuery('#pdf-contents').removeClass('test');

   // ctx.fillRect(jQuery(".position_x").val(), jQuery(".position_y").val(), jQuery(".position_w").val(),jQuery(".position_h").val());   
    //ctx.clearRect(0,0,jQuery(".position_w").val(),jQuery(".position_h").val());

    //ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
//      URL.createObjectURL($("#file-input").get(0).files[0]); /*reload mate*/


    //alert(URL.createObjectURL($("#file-input").get(0).files[0]))
    showPDF(URL.createObjectURL($("#file-input").get(0).files[0]));
    //setTimeout(function(){ showPDF(URL.createObjectURL($("#file-input").get(0).files[0])); }, 3000);

} 
function ddrag(){

     //const storedRects = [];
     jQuery('.test #pdf-canvas').mousedown(function(){ 
     console.log(jQuery(this).parent().parent().attr('class'));
        if(jQuery(this).parent().parent().attr('class')=="test"){
            return false;
        }else{
            return true;
        }
    });
    jQuery('#pdf-contents').addClass('test');

        //return false; 


}

在PDF中绘制框并捕获坐标

1 个答案: