Нарисуйте прямоугольную ограничительную коробку на PDF, чтобы получить координату, но внутренний прямоугольник, заполнен ⇐ Html

[Anonymous]

В этом коде я имею предварительный просмотр PDF, и я могу нарисовать ограничивающую коробку, но ее наполняющий белый цвет и добавил мой скриншот. Я могу получить координату, используя (проверьте ее в консоли), но внутренний текст не виден, кроме того, что мне нужно скопировать координату, как только я нарисовал прямоугольник в прослушивателе мыши, чтобы я мог вставить в любом месте. Lang-HTML PrettyPrint-Override ">

Код: Выделить всё

#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;
}




Select PDF


Loading document ...



Previous
Next

Page

of




Loading page ...



//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;
}


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);
});

Подробнее здесь: https://stackoverflow.com/questions/602 ... ctangle-fi