В этом коде у меня есть предварительный просмотр PDF-файла, и я могу нарисовать ограничивающий прямоугольник, но он заполняется белым цветом и добавил мой скриншот. Я могу получить координату, используя (проверьте это в консоли), но внутренний текст не виден, кроме того, мне нужно скопировать координату, как только я нарисовал прямоугольник в слушателе мыши, чтобы я мог вставить в любое место.
<!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;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
opacity: 1;
background: none;
}
#page-loader {
height: 100px;
line-height: 100px;
text-align: center;
display: none;
color: #999999;
font-size: 13px;
}
/* #pdf-canvas{
opacity:0.5;
} */
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</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>
</div>
<script type="text/javascript">
//Rectangle
"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("pdf-canvas");
const ctx = canvas.getContext("2d");
// ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = 0.2;
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) {
// ctx.fillRect(50,50,500,500);
// ctx.clearRect(0, 0, 500, 500);
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.fillStyle = "rgba(255, 255, 255, 0.5)";
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() {
// ctx.fillRect(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
__CANVAS_CTX.strokeRect();
const storedRects = [];
// ctx.restore();
// ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.height)
// if(__PDF_DOC!=null && __PDF_DOC!=undefined && __PDF_DOC!=null){
// showPage(__CURRENT_PAGE);
// }
// 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);
// ctx.clearRect(20, 20, 100, 50);
}
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() {
// ctx.clearRect(0, 0, 500, 500);
//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;
}
</script>
<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>